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}}，未插值。 <ion-tab> 将表达式插入变量值，显示正确的数据。

这让我很困惑。我将my-directive 放在ion-tab 指令的内部和外部，以防出现某种范围问题。

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

---

背景：

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

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

我似乎能够通过 $scope.$parent.view 获得我想要的值，但神秘地设置 $scope.view = $scope.$parent.view 并在子模板中设置 {{view}} 不起作用要么！？

---

更多洞察，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: true

.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

这是一个时间问题，与指令生命周期内某些事情发生的时间以及它经历的几个阶段有关。 尽可能少的细节，这些是阶段：

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

请注意，将插值属性 ({{...}}) 解析为值会发生在预链接阶段的某个时间（它也是一个 Angular 内置指令）。这意味着：

一个。这些值在控制器实例化期间未解析。
湾。这些值肯定会在链接后阶段得到解决。
C。根据您的指令与（深奥的）属性插值指令（优先级为 100）的相对优先级，在预链接阶段可能会或可能不会解析这些值。

_{注意：更高的优先级意味着预链接发生得更快。}

---

docs on $compile 很好地解释了正在发生的事情（如果你真的仔细阅读的话）。