AngularJS 范围未在指令中更新

Question

I have an AngularJS directive that needs an isolate scope plus access to the $parent scope. The parent scope has data which changes after an ajax call completes.

In my directive's linking function, I have:

scope.loading = scope.$parent.contractData.People.loading;

but when the parent's contractData value changes, scope.loading does not update. I've even tried using scope.$watch , but that does not get notified of the change either.

In my directive's template, I am using ng-show . The following template works as expected:

<span ng-show="$parent.contractData.People.loading">loading</span>

But this does not work (because the scope never finds out about the data change):

<span ng-show="loading">loading</span>

I need to be able to set up a scope variable in my directive, because 'People' will change, depending on data passed into the directive's attributes. Otherwise I would just stick with the working example above.

Any help is appreciated. Thank you.

Answer 1

You can set up the HTML for the directive like:

<div mydirective="contractData.People.loading"></div>

And within the directive itself, create an isolate scope binding to the loading property

scope: {
    isLoading: '=mydirective'
},
// rest of directive

This creates a property on the directive's local scope that is bound to the attribute expression. Then you can refer to that scope property in the directive's template like:

template: '<span ng-show="isLoading">loading</span>'

Here is a fiddle