javascript - Angular Directive(指令)，范围 : True AND Add attribute to scope

Question

我的指令工作正常，显示所有趋势标签。该指令在 $scope 对象中查找 trendingTag 属性。所以我有 scope: true

app.directive('ngTrending', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , scope: true
        , templateUrl: '/resources/ngViews/trending.html'

    };
});

现在我希望能够基于指令的属性基于选项(如 read-only="true")配置它。并且能够根据属性有条件地更改模板的次要方面

<ng-trending></ng-trending>

生成启用了操作的趋势标签。而

 <ng-trending read-only="true"></ng-trending>

生成标签，但禁用点击。我如何对指令的范围进行编码，以便我仍然继承托管指令的 Controller 的范围，例如

<div ng-controller="fancy">
    <ng-trending></ng-trending>
</div>

就像现在的情况一样(在指令的模板内，我引用了 fancyContrllers $scope.trendingTags 属性)。但是在指令的模板内部，我想引用 $scope 中的“只读”。

我突然意识到我完全错误地处理了这个问题，而且我可能也想传递趋势标签...我很困惑 - 请帮助我理清思路!

谢谢。

Answer 1

正常的过程是使用一个独立的作用域来传递你想要在指令中的任何变量(除非你需要在元素上有多个指令)。这将产生更可重用和可测试的指令，以及更清晰的代码，因为该指令不会与其周围环境耦合。

对于您的情况，如果您编写这样的隔离范围

scope: {
    trendingTags: '=',
    readOnly: '='
    // ...
}

然后您可以将外部作用域上的表达式绑定(bind)到内部作用域上的 trendingTags，与使用元素上的属性的 readOnly 相同。

你的元素看起来像这样

<ng-trending trending-tags="trendingTags" read-only="true"></ng-trending>

这里有一些关于隔离范围的更多信息 http://docs.angularjs.org/guide/directive .