Angular js scope on nested template

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/

Fiddle is working as expected http://jsfiddle.net/to5y9kud/1/ — filype, Aug 27 '15 at 12:00
Could be that in your app you're messing up the scope because you're exposing a primitive variable from the controller. So try and add something like a settings object: scope.settings = {loading: false}. Then bind to that variable — sirrocco, Aug 27 '15 at 12:03

score 1 · Accepted Answer · edited May 23 '17 at 11:44

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;

edited May 23 '17 at 11:44

Community

1
1

answered Aug 27 '15 at 12:15

MoLow

3,056
2
21
41

Thanks, it makes sense, the fiddle was already working with the primitive data type boolean, it's just not working on my application. – filype Aug 27 '15 at 12:27
also when you change it from a primitive to a Object? – MoLow Aug 27 '15 at 12:28
1

testing it now, I wonder thought how is it that ng-show for example works with primitive values – filype Aug 27 '15 at 12:30

Angular js scope on nested template

1 Answers1

Linked