Sendo envolto por uma directiva, como posso ter acesso ao seu âmbito de aplicação?

Question

Como posso ter acesso a directiva isolar âmbito de aplicação da directiva do corpo?Meu DOM parecido com este:

<div ng-app="app">    
    <directive>
        <p>boolProperty: {{boolProperty|json}}</p>
    </directive>
</div>

O boolProperty é atribuído dentro da directiva link função:

angular.module("app", []).directive("directive", function() {
    return {
        scope: {},
        link: function($scope) {
            $scope.boolProperty = true;
        }
    };
});

O problema é que a criança <p> dentro da directiva vincula-se à directiva pai escopo, não a directiva isolados de escopo.Como eu posso superar isto?

Clique aqui para jsFiddle.

Answer 1

Você se esqueceu de duas coisas:

1. Por padrão AngularJS usa attrubute restrição, então, no seu caso na directiva definição, você deve especificar restrict: "E"
2. Você deve usar o escopo filho, mas não isolado.Para definir scope: true para herdar do pai de exibição de escopo.

Veja atualizado violino http://jsfiddle.net/Y9g4q/1/.

Boa sorte.

Answer 2

Existem alguns problemas no seu código.

1. O padrão restringir opção é A para o atributo então, de qualquer maneira a sua directiva não será compilado porque você está usando-o como um elemento.Utilização restrict: 'E' para fazê-lo funcionar.

2. De acordo com a documentação, o escopo do transcluída elemento não é uma criança âmbito de aplicação da directiva, mas um irmão um.Então, boolProperty sempre vai ser indefinido ou vazio.Então você tem que ir até o nível de escopo e encontrar a própria irmã.

   <div ng-app="app">
      <directive>
       <p>boolProperty: {{$parent.$$childHead.boolProperty}}</p>
       </directive>
   </div>
   

e precisa usar inclusão na directiva como:

angular.module("app", []).directive("directive", function() {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        template: '<div ng-transclude></div>',
        link: function(scope) {
            scope.boolProperty = true;
        }
    };
});

No entanto, esta abordagem não é aconselhável e, de quebra, mais tarde, Se você adicionar um novo controlador antes da directiva, uma vez transcluída âmbito torna-se 2º colateral, ao contrário do 1º como antes.

<div ng-app="app">
    <div ng-controller="OneCtrl"></div>
    <directive>
        <p>boolProperty: {{$parent.$$childHead.boolProperty || $parent.$$childHead.$$nextSibling.boolProperty}}</p>
    </directive>
</div>

Aqui é o Trabalho De Demonstração.A abordagem que eu mencionei, não é o ideal para uso em seu próprio risco.O @CodeHater' s de resposta é o que você deve ir com ele.Eu só queria explicar por que ele não funcionar para você.

Answer 3

Do docs:

As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.

Parece que você precisaria adicionar explicitamente boolProperty para scope.

<div ng-app="app" ng-controller="ctrl">    
    <directive bool="boolProperty">
        <p>boolProperty: {{boolProperty|json}}</p>
    </directive>
</div>

JS

angular.module("app", []).controller("ctrl",function($scope){
    $scope.boolProperty = false;
}).directive("directive", function() {
    return {
        restrict:"E",
        scope: {boolProperty:'=bool'},
        link: function($scope) {
            $scope.boolProperty = "i'm a boolean property";
        }
    };
});

Aqui está atualizado violino.