嵌套模板上的Angular js范围

Question

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/

Answer 1

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 ;