AngularJS我的自定义指令不能访问属性，但它似乎其他自定义指令可以

Question

我有以下模板的自定义指令。

.directive('myDirective', ['$controller',function($controller) { 
     return { 
      templateUrl: 'client/test.ng.html', 
      scope: true, 
      controller: ['$scope','$attrs',function($scope,$attrs){ 
       console.log($attrs) 
      }], 
      transclude: true, 

     } 
    }]) 

这个指令是被称为如下

<my-directive view="{{view}}"></my-directive> 
    <ion-tab ng-if="platform != 'android'" title="{{label}}" icon-off="{{off}}" icon-on="{{on}}" href="#/tab/{{view}}"> 
      <my-directive view="{{view}}"></my-directive> 
    </ion-tab> 

    <ion-tab ng-if="platform == 'android'" title="{{label}}" class="tab-item" href="#/tab/{{view}}"> 
      <my-directive view="{{view}}"></my-directive> 
    </ion-tab> 

$attrs.view是{{view}}，uninterpolated。 <ion-tab>将表达式内插到变量值中，显示正确的数据。

这对我来说很困惑。我已经在ion-tab指令的内部和外部放置了my-directive，以防出现某种范围问题。

访问表达式的值并使用该值反过来调用另一个指令的关键是什么？

---

背景：

我经历这一切的原因是因为

<ion-nav-view name="tab-{{view}}"></ion-nav-view>不起作用。它，就像my-directive似乎无法获得```view`的值，而是原始未解析的请求。我试图获取该值并直接调用该指令。

我似乎可以用$ scope获得我想要的值$ parent.view然后神秘地设置$ scope.view = $ scope。$ parent.view并设置子模板中的{{view}} DOESNT工作！？

---

更多的洞察力，执行console.log（$ ATTRS）给出：

$…t.Attributes {$attr: Object, $$element: jQuery.fn.init[1], view: "{{view}}", class: "pane tab-content", navView: "active"} 

然而，当这个被扩大，我们有

$$element: jQuery.fn.init[1] 
    $$observers: Object 
    $attr: Object 
    class: "pane tab-content" 
    navView: "active" 
    view: "dash" 
    __proto__: Object 

任何帮助表示赞赏，感谢。

Answer 1

使用链接功能获取属性值。

.directive('myDirective', ['$controller',function($controller) { 
    return { 
     templateUrl: 'client/test.ng.html', 
     scope: true, 
     transclude: true, 
     link: function(scope,element,attrs){ 
      console.log(attrs); 
     } 
    } 
}]) 

Answer 2

我上无法看到你的指令内的任何HTML，所以我删除transclude：真

.directive('myDirective', function() { 
    return { 
     templateUrl: 'client/test.ng.html', 
     scope: { 
      view: '=' 
     }, 
     link: function (scope) { 
      console.log("view", view); 
      scope.$watch("view", function (newView, prevView) { 
       console.log("changed view", scope.view, newView, prevView); 
      }); 
     } 
    } 
}) 

Answer 3

这是一个计时问题当某些事情发生一个指令的生命周期内是有关以及它经历的几个阶段。 在尽可能少detaila越好，这些是相：

1. 编译
2. 实例化控制器
3. 预联
4. 后联

注意resovling内插属性（ {{...}}）的值在预链接阶段有时会发生（并且它也是一个Angular内置指令）。这意味着：

a。在控制器实例化期间解决的值是而不是。 b。这些值在链接后阶段当然是可以解决的。
c。根据您的指令相对于（深奥）属性插值指令（其优先级高于100）的相对优先级，在预链接阶段可能会或可能不会解决这些值。

_{注意：更高的优先级意味着更早的链接正在发生。}

---

的docs on $compile做一个公平的工作，解释正在发生的事情（如果你仔细阅读它真的）。