CODEWITHSUNDEEP
angularjs
Seeker
Seeker

Reputation: 1017

ng-bind span not updated on changing the object's property

In the following code, i change the object's property on clicking the 'tab' element, but the corresponding ngbind span is not getting updated. Do i have to call some function to update the view?

HTML:

<html ng-app="splx">
  ...
  <body ng-controller="Application">
    <span ng-bind="obj.val"></span>
    <tabpanel selector="obj">
      <div tab value="junk">junk</div>
      <div tab value="super">super</div>
    </tabpanel>
  </body>
</html>

JS:

var cf = angular.module('splx', []);

function Application($scope) {
  $scope.obj = {val: "something"};
}

cf.directive('tabpanel', function() {
  return {
    restrict: 'AE',
    scope: {
      selector: '='
    },
    controller: ['$scope', function($scope) {}]
  };
});

cf.directive('tab', function() {
  return {
    require: '^tabpanel',
    restrict: 'AE',
    scope: true,
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        scope.$parent.selector.val = "newthing";
      });
    }
  };
});

Upvotes: 2

Views: 4043

Answers (2)

user1364910
user1364910

Reputation: 

cf.directive('tab', function() {
  return {
    require: '^tabpanel',
    restrict: 'AE',
    scope: true,
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        scope.$apply(function () {
          scope.$parent.selector.val = "newthing";
        });
      });
    }
  };
});

That works for me. Just missing a little scope.$apply in there.

Might want to have a look at https://coderwall.com/p/ngisma if you find yourself using/having trouble with '$apply already in progress'.

If you want to change the value to what you clicked on, I'd do something like this: 

scope.$parent.selector.val = attrs.tab;

As opposed to:

scope.$parent.selector.val = "newthing";

And then you can change your markup to look like this: 

<tabpanel selector="obj">
  <div tab="junk">junk</div>
  <div tab="super">super</div>
</tabpanel>

Hope that helps!

Upvotes: 2

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

First problem: you are not binding your controller to your app. You need cf.controller('Application', Application);. Also you need ng-controller="Application" in HTML on a parent of that span and the tabpanel directive.

Second problem: after changing that scope variable in your click event you need to scope.$apply() to let Angular know something changed and it needs to $digest it.

You can check out my version here.

Upvotes: 1

Related Questions