【问题标题】:How do I examine scope in an Angular directive from within the link function?如何从链接函数中检查 Angular 指令中的范围?
【发布时间】:2013-09-25 08:08:48
【问题描述】:

我有一个相当简单的 Angular 指令,它有自己的模板。但是,如果admin === true,我想修改某些元素的一些属性,例如让他们ui-sortable

app.directive('members',function(){
return {
    restrict: 'A',
    template: '<h4>{{title}}</h4>'+
  'admin? <span>false</span>' +
        '<ul ng-model="list">' +
        '<li ng-repeat="member in list">' +
        '   {{member.name}}' +
        '</li>'+
        '</ul>',
    transclude:true,
    scope: {title:'@',list:'=',admin:'@'},
    link: function ($scope,$element,attrs) {
  if ($scope.admin) {
        $element.find("span").html("true");
          $element.find("ul").attr("ui-sortable","");
  }
    }

};
})

我使用$element.find("span") 只是为了测试它是否找到它。 admin 从元素的属性中被拉到了隔离作用域中,但仍然没有通过。

小提琴在这里:http://jsfiddle.net/zqM4Z/4/

link 函数中似乎提供了隔离作用域?

【问题讨论】:

    标签: angularjs angularjs-directive


    【解决方案1】:

    可能是版本问题。以下适用于我使用版本 1.2.0

    link: function ($scope,$element,attrs) {
        console.log($scope.admin); // gives 'true'
    

    【讨论】:

    • 看起来是这样。早期版本(不确定是哪个)显然直到很久以后才设置“@”范围属性。我不得不使用attrs.$observer('admin'),这很奇怪。
    • 没错。看起来他们稍后更改了链接阶段。我将切换到 1.2.0
    【解决方案2】:

    我发现将作用域全局暴露给窗口对于调试目的非常有用。

    window.scope = scope; // or $scope from controller/run
    

    然后您可以使用开发人员工具对其进行检查。

    【讨论】:

    • 我可以通过使用调试工具并在链接 fn 中放置一个断点来做到这一点
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-13
    相关资源
    最近更新 更多