CODEWITHSUNDEEP
javascriptangularjs
filype
filype

Reputation: 8380

Angular js scope on nested template

I have the following directive where I have been using as

<ui-submit-button btn-state='btnSendProcessing' />

The btnSendProcessing is a value in the controller's scope it gets turned on and off while the http request is being fired.

The ng-disabled works but it is not showing the processing icon.

.directive('uiSubmitButton', function() {

    return {
      restrict: 'E',
      template : function() {
        return ' \
          <button class="btn btn-success" type="submit" ng-disabled="btnState"> \
            <input type="checkbox" ng-model="btnState" /> {{btnState}} \
            <i class="fa fa-cog" ng-show="btnState" /> \
            <span ng-hide="btnState">{{btnLabel || "Submit"}}</span> \
          </button>';
      },
      replace : true,
      scope : {
        btnState : '=',
        btnLabel : '@'
      }
    };

  })

What could be the issue here?

Fiddle is working as expected http://jsfiddle.net/to5y9kud/1/

Upvotes: 1

Views: 116

Answers (1)

MoLow
MoLow

Reputation: 3084

in scope inheritance, and basically in any js prototype inheritance, if you use a primitive, it copies the primitive value to the inherited object.

if you want changes to effect both the parent and the inherited scope, you should use an Array or an Object, this is an example which explains what is a normal behavior of an inherited scope:

$parentScope.a = 1;
$parentScope.b = {a:1};
$childScope = $parentScope.$new() //inherit from $parentScope

console.log($childScope.a === 1, $childScope.b.a === 1) //true, true
$childScope.a = 2;
$childScope.b.a = 2;
console.log($parentScope.a === 2, $parentScope.b.a === 2) //false, true

so in your case btnSendProcessing should be an object and not a primitive. here is a working fiddle: http://jsfiddle.net/avp9ye1g/1/

read this great answer for better understanding: Understanding Javascript immutable variable;

Upvotes: 1

Related Questions