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/

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
– sirrocco, Commented Aug 27, 2015 at 12:03

Community · Accepted Answer · 2017-05-23 11:44:48Z

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, 2017 at 11:44

CommunityBot

11 silver badge

answered Aug 27, 2015 at 12:15

MoLow

3,0642 gold badges23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

filype Over a year ago

Thanks, it makes sense, the fiddle was already working with the primitive data type boolean, it's just not working on my application.

MoLow Over a year ago

also when you change it from a primitive to a Object?

filype Over a year ago

testing it now, I wonder thought how is it that ng-show for example works with primitive values

Collectives™ on Stack Overflow

Angular js scope on nested template

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related