Question

说我有一个指令元素：

  <monkey-grid></monkey-grid>

现在，假设我想要包含一些“选项”，以便monkey-grid.tpl.html以特定方式呈现，并且可以在不同情况下重复使用。

  <monkey-grid tabbed></monkey-grid>
  <!-- also tried this -->
  <monkey-grid tabbed="true"></monkey-grid>

然后在我的猴子网格模板中，我想做这样的事情，但即使我将transclude设置为false（因此原始元素仍然存在），它也不起作用。我希望只有适当的div可见。

  <div>

    <div ng-show="tabbed == true">TABS</div>
    <!-- also tried -->
    <div ng-show="vertical">VERTICAL</div>      

  </div>

是否有一些更好的方法可以制作“可配置指令”，因为缺少更好的术语？

指令：

(function() {
    'use strict';

    angular.module('App.Directives').directive('monkeyGrid', function(){
        return {
            restrict: 'E',
            replace: false,
            controller: 'MonkeyController',
            templateUrl: 'main/app/components/mokneyGrid/mokney-grid.tpl.html'
        };
    });

}());

Answer 1

实际上，您需要将属性传递到范围：

(function() {
'use strict';

angular.module('App.Directives').directive('monkeyGrid', function(){
    return {
        restrict: 'E',
        replace: false,
        scope: {
            vertical:'=vertical',
            tabbed:'=tabbed'
        },
        controller: 'MonkeyController',
        templateUrl: 'main/app/components/mokneyGrid/mokney-grid.tpl.html'
    };
});

}（））;

您可以解析绑定项，例如使用@运算符：

        scope: {
            fooey:'@fooey'
        },

这让我失望，因为通常在模板中你可以锁定任意定义的属性。你不能在这里的原因是因为它们在角度编译阶段会丢失，你必须明确告诉它编译/绑定它们。

您可以使用更简洁。变量名称变为隐式：

        scope: {
            vertical:'=',
            tabbed:'='
        },

如何制作＆＃34;可配置指令＆＃34;？

1 个答案: