指令链接属性不起作用答案

【问题标题】：directive link attrs don't work指令链接属性不起作用
【发布时间】：2016-02-07 13:27:46
【问题描述】：

在 html 中我调用我的指令：<div godata-pagination count="{{pagination.count}}" size="{{pagination.size}}" page="{{pagination.page}}"></div>

然后我的指令往里面看：

function link(scope, element, attrs) {
    console.log('attrs: ' + attrs.size);
    scope.pagCount = attrs.count;
    scope.pagPage = attrs.page;
}
return {
    restrict: 'A',
    transclude: true,
    scope: {
        count: '@',
        size: '@',
        page: '@'
    },
    templateUrl: 'partials/godata/pagination.html',
    link: link
};

在部分（partials/godata/pagination.html）中，我可以访问这些变量（计数、大小和页面）。对于 100% 的部分 i 访问原始这三个变量，在此范围内没有其他变量。

但我会在函数链接中对这些变量做一些事情。如果我尝试通过 attrs 访问函数链接中的这些变量，它们是空的:(

出了什么问题和/或我能做什么？

更新：

scope: false 范围变量未定义。

为什么在函数链接两个输出中带来attrs.$observe('page', function(val) { console.log('$observe: ' + val); }); 行...一个有值，一个没有值？

再次更新：

function link(scope, element, attrs) {
    console.log('scope: ' + scope.size);
    console.log('scope: ' + scope);
    console.log('attrs: ' + attrs.size);
    console.log('attrs: ' + attrs);
    attrs.$observe('size', function(size) {
        console.log('$observe: ' + size);
        if(size) {
            scope.pagSize = size;
        }
    });
    console.log('after observe; pagSize: ' + scope.pagSize);
}

...带给我：

但是scope.pagSize 在浏览器中有一个值。

如果我无法访问它们，我该如何在指令中使用这些属性？！

【问题讨论】：

stackoverflow.com/questions/11913841/…
尝试通过控制台记录所有 attr 对象，看看里面有什么。
有一个空对象scope: [object Object]和attrs: [object Object]

标签： angularjs angularjs-directive

【解决方案1】：

它们被绑定到指令的范围内。

例如，您可以使用scope.page、scope.count 访问它们。

【讨论】：

【解决方案2】：

正如@Hristo Enev 回答的那样：当您拥有隔离范围时，最好访问属性为scope.page 或scope.count

但如果你坚持要使用属性，

就是这样：

attrs.$observe('page', function(val) { console.log(val) })

产生页面属性的值。

在链接函数内部，你应该使用 $observe() 来获取插值。

【讨论】：