AngularJS directive does not update on scope variable changes

Question

I ve tried to write a small directive  to wrap its contents with another template file   This code    lt layout name  Default  gt My cool content lt  layout gt    Should have this output    lt div class  layoutDefault  gt My cool content lt  div gt    Because the layout  Default  has this code    lt div class  layoutDefault  gt   content   lt  div gt    Here the code of the directive   app directive  layout   function  http   compile   return       restrict   E       link  function scope  element  attributes            var layoutName    angular isDefined attributes name     attributes name    Default            http get scope constants pathLayouts   layoutName     html                success function layout                   var regexp        s S      content     s S     g                  var result   regexp exec layout                    var templateWithLayout   result 1    element html     result 2                   element html  compile templateWithLayout  scope                                   My problem   When I m using scope variables in template  in layout template or inside of layout tag   eg    whatever   it just work initially  If I update the whatever variable  the directive is not updated anymore  The whole link function will just get triggered once   I think  that AngularJS does not know  that this directive uses scope variables and therefore it will not be updated  But I have no clue how to fix this behavior

User · Answer

I am not sure why no one has yet suggested bindToController which removes all these ugly scopes and $watches. If You are using Angular 1.4

Below is a sample DOM:

<div ng-app="app">
    <div ng-controller="MainCtrl as vm">
        {{ vm.name }}
        <foo-directive name="vm.name"></foo-directive>
        <button ng-click="vm.changeScopeValue()">
        changeScopeValue
        </button>
    </div>
</div>

Follows the controller code:

angular.module('app', []);

// main.js
function MainCtrl() {
    this.name = 'Vinoth Initial';
    this.changeScopeValue = function(){
        this.name = "Vinoth has Changed"
    }
}

angular
    .module('app')
    .controller('MainCtrl', MainCtrl);

// foo.js
function FooDirCtrl() {
}

function fooDirective() {
    return {
        restrict: 'E',
        scope: {
            name: '='
        },
        controller: 'FooDirCtrl',
        controllerAs: 'vm',
        template:'<div><input ng-model="name"></div>',
        bindToController: true
    };
}

angular
    .module('app')
    .directive('fooDirective', fooDirective)
    .controller('FooDirCtrl', FooDirCtrl);

A Fiddle to play around, here we are changing the scope value in the controller and automatically the directive updates on scope change. http://jsfiddle.net/spechackers/1ywL3fnq/

User · Answer

I know this an old subject but in case any finds this like myself   I used the following code when i needed my directive to update values when the  parent scope  updated  Please by all means correct me if am doing something wrong as i am still learning angular  but this did what i needed   directive    directive  dateRangePrint   function        return           restrict   E           scope             still using the single dir binding             From    rangeFrom               To    rangeTo               format    format                     controller  function  scope   element                 scope viewFrom   function                        return formatDate  scope From   scope format                                   scope viewTo   function                        return formatDate  scope To   scope format                                  function formatDate date  format                   format   format     DD-MM-YYYY                      do stuff to date                     return date format format                                     replace  true             note the parenthesis after scope var         template    lt span gt    viewFrom      -    viewTo      lt  span gt

User · Answer

You should create a bound scope variable and watch its changes   return      restrict   E      scope         name               link  function scope         scope  watch  name   function                all the code here

User · Answer

We can try this   scope  apply function          scope step1   true        scope list2 length   0        http   jsfiddle net Etb9d

User · Answer

I needed a solution for this issue as well and I used the answers in this thread to come up with the following    directive  tpReport      parse     http     compile     templateCache   function  parse   http   compile   templateCache                var getTemplateUrl   function type                        var templateUrl                    switch  type                                case 1     Table                     templateUrl    modules tpReport directives table-report tpl html                       break                  case 0                      templateUrl    modules tpReport directives default tpl html                       break                  default                      templateUrl                           console log  Type not defined for tpReport                        break                             return templateUrl                      var linker   function  scope  element  attrs                         scope  watch  data   function                    var templateUrl   getTemplateUrl scope data 0  typeID                   var data    templateCache get templateUrl                   element html data                    compile element contents    scope                                           return               controller   tpReportCtrl               template    lt div gt   data   lt  div gt                   Remove all existing content of the directive              transclude  true              restrict   E               scope                    data                                 link  linker                            Include in your html    lt tp-report data  data  gt  lt  tp-report gt    This directive is used for dynamically loading report templates based on the dataset retrieved from the server   It sets a watch on the scope data property and whenever this gets updated  when the users requests a new dataset from the server  it loads the corresponding directive to show the data

User · Answer

You should keep a watch on your scope   Here is how you can do it    lt layout layoutId  myScope  gt  lt  layout gt    Your directive should look like  app directive  layout   function  http   compile       return           restrict   E           scope                layoutId    layoutId                     link  function scope  element  attributes                var layoutName    angular isDefined attributes name     attributes name    Default                http get scope constants pathLayouts   layoutName     html                    success function layout                       var regexp        s S      content     s S     g                      var result   regexp exec layout                        var templateWithLayout   result 1    element html     result 2                       element html  compile templateWithLayout  scope                          scope  watch  myScope  function              Do Whatever you want       true    Similarly you can models in your directive  so if model updates automatically your watch method will update your directive

User · Answer

A simple solution is to make the scope variable object  Then access the content with    whatever-object whatever-property     The variable is not updating because JavaScript pass Primitive type by value  Whereas Object are passed by reference which solves the problem

User · Answer

You need to tell Angular that your directive uses a scope variable   You need to bind some property of the scope to your directive   return       restrict   E       scope          whatever                        and then  watch it      scope  watch  whatever   function value           do something with the new value         Refer to the Angular documentation on directives for more information

User · Answer

I ve found a much better solution   app directive  layout   function        var settings             restrict   E           transclude  true          templateUrl  function element  attributes               var layoutName    angular isDefined attributes name     attributes name    Default               return constants pathLayouts   layoutName     html                       return settings        The only disadvantage I see currently  is the fact that transcluded templates got their own scope  They get the values from their parents  but instead of change the value in the parent  the value get stored in an own  new child-scope  To avoid this  I am now using  parent whatever instead of whatever   Example    lt layout name  Default  gt       lt layout name  AnotherNestedLayout  gt           lt label gt Whatever  lt  label gt           lt input type  text  ng-model   parent whatever  gt       lt  layout gt   lt  layout gt

[javascript] AngularJS directive does not update on scope variable changes

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-scope