在Angular JS中隔离范围

Question

<form id="form1" runat="server" ng-app="myapp">
    Parent Scope  {{X}}
    <br />

    <div my-customer>
        <div ng-init="X ='Hello World'">
            ISOLATED SCOPE    {{X}}
        </div>
    </div>
</form>

Directive

angular.module('myapp', [])
.directive('myCustomer',function()
{
return {
    restrict: 'A',
    scope: {}

}

})

In above code , I have created custom directive with an isolated scope. Variable X is initiated to 'Hello World' in the Isolated scope of the custom directive.But I am getting below Output

Parent Scope Hello World 
ISOLATED SCOPE Hello World

First {{X}} should be empty ( since custom directive has isolated scope) but it has the same value as the second {{X}} . Any idea why? Angularjs version is
AngularJS v1.5.3

Answer 1

My first hunch is directive priority. From the docs :

priority

When there are multiple directives defined on a single DOM element, sometimes it is necessary to specify the order in which the directives are applied. The priority is used to sort the directives before their compile functions get called. Priority is defined as a number. Directives with greater numerical priority are compiled first. Pre-link functions are also run in priority order, but post-link functions are run in reverse order. The order of directives with the same priority is undefined. The default priority is 0.

and ng-init has a priority of 450 . So it would seem ng-init is being run before your scope is isolated by the directive. Try adding 'priority: 451' to your directive declaration.

Answer 2

The scope does simply not get applied at this point.

You have to use the template option.

 angular.module('myapp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.foobar = "foobar"; }]) .directive('myCustomer', function() { return { restrict: 'EA', scope: { foobar: '@' }, template:"INNER SCOPE {{foobar}}", controller: function($scope) { $scope.foobar = "hello world"; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <form id="form1" runat="server" ng-app="myapp" ng-controller="myCtrl"> Parent Scope {{foobar}} <br /> <div my-customer foobar="Hallo welt" /> </form> 

Answer 3

I think the culprit of your problem is ng-init usage. In its documentation doesn't recommend their usage in this way

NgInit works with the scope in pre-link stage with high priority and sets the value into the scope.