角度指令，范围：真，并将属性添加到范围

我的指令工作正常，显示所有趋势标签。该指令在$ scope对象中查找trendingTag属性。所以，我有范围：真正角度指令，范围：真，并将属性添加到范围

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

    }; 
});

现在我想基于指令属性可以根据选项来配置它（如只读=“真”）。并基于attirbute这样THT

<ng-trending></ng-trending>

生成启用行动的趋势标签能够有条件地更改模板的次要方面。虽然

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

生成标签，但禁用了点击。如何在指令上对范围进行编码，以便我仍继承托管该指令的控制器的范围，例如

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

现在就是这种情况（在指令模板的内部，我引用了fancyContrilers $ scope.trendingTags属性）。但是在指令的模板中，我想引用$ scope中的“只读”。

它只是在我看来，我正在接近这完全错误的，我可能想要通过趋势标签以及...我很困惑 - 请帮助理清我！

谢谢。

来源

2013-10-14 akaphenom

如果你不想改变你的指令的范围，我认为你可以在'link'函数中检查属性（'attrs.readOnly'会给你一个字符串值）。你可以使用'scope。$ eval（attrs。readOnly）'或'$ parse'来进行单向和双向绑定。 – jpmorin

@ jpmorin的建议对我很好。这不是要养成的习惯，尽管在某些情况下它可以有效。 –

正常的过程是使用隔离范围在指令中传递所需的任何变量（除非您需要多个元素指令）。这将导致更多的可重用和可测试指令，并且更清晰的代码，因为指令不会与其周围环境耦合。

对于你的情况下，如果写的分离物范围这样

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

然后就可以在内部范围上的外部范围的表达结合trendingTags，并与readOnly在元件上使用属性相同。然后

您元素看起来像这样

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

有在这里http://docs.angularjs.org/guide/directive分离范围的更多信息。

来源

2013-10-14 19:38:16 Andyrooger

是否有可能也默认readOnly为假 – akaphenom

如果它没有在属性上定义，那么'scope.readOnly'将是'undefined'。你可以测试这个，如果你喜欢，可以使用默认值。或者，你可以使用'scope.readOnly'本身，当你只需要'falsy'的时候undefined ...或者'!! scope.readOnly'会被强制转换为布尔值。 – Andyrooger

为了完整起见，我的工作解决方案包括动作绑定。任何批评都欢迎。谢谢andyrooger：

的指令：

app.directive('ngTrending', function() { 
    return { 
     restrict: 'E' 
     , transclude: true 
     , replace: true 
     , scope: { 
      trendingTags: '=' 
      , displayOnly: '=' 
      , inlineLabel: '=' 
      , filterTo: '&' 
      , isFilteredTo: '&' 
     } 
     , templateUrl: '/resources/ngViews/trending.html' 

    }; 
});

模板：

<div style="text-align: center"> 
    <div class="btn-group-xs"> 
     <span ng-show="(!!inlineLabel)" style="color: #81B1D9">Tagged: </span> 
     <button ng-repeat="tag in trendingTags | orderBy:'count':true | limitTo:8" type="button" class="btn btn-default btn-primary" 
       style="text-wrap: normal; margin: 2px;" 
       ng-click="filterTo({filterToTag: tag.tagName})" ng-class="{active: isFilteredTo({filterToTag: tag.tagName}), disabled: (!!inlineLabel)}"><span 
       ng-bind-html-unsafe="tag.tagName"></span> <span class="badge" ng-show="!(!!displayOnly)">{{ tag.count }}</span 
     </button> 
    </div> 
    <button type="button" class="btn btn-xs btn-default" style="width: 150px; text-wrap: normal; margin-top: 3px" 
      ng-click="filterTo({filterToTag: ''})" ng-show="!(!!displayOnly)">Clear 
    </button> 
</div>

在使用中：

<ng-trending trending-tags="tags" 
        filter-to="filterTo(filterToTag)" 
        is-filtered-to="isFilteredTo(filterToTag)"></ng-trending>

来源

2013-10-14 23:48:57 akaphenom

角度指令，范围：真，并将属性添加到范围

回答

相关问题