Question

我在许多屏幕上都复制了HTML，所以我创建了一个这样的指令：

app.directive('adminRetrieveButton', ['stateService', function (stateService) {
    return {
        restrict: 'AE',
        template: "<button id='retrieveButton'\
                           ng-disabled='!home.forms.grid.$pristine'\
                           ng-click='ctrl.retrieve()' >Retrieve\
                      <span class='fa fa-fw mlr75'\
                         ng-class='{\"fa-spin fa-spinner\": stateService.action[Network.Retrieve], \"fa-download\": !stateService.action[Network.Retrieve] }' >\
                      </span>\
                   </button>",
        link: function (scope, element, attrs) {
            scope.stateService = stateService;
        }
    };
}]);

该指令和其他类似指令除了创建一些模板类型的代码之外没有任何功能。现在，我不需要在每个页面中编写8行HTML代码，而只需要一行：

<admin-retrieve-button></admin-retrieve-button>

是否有另一种替代方案可以使它更简单，而不需要创建指令？

Answer 1

是的，您不需要仅为模板创建指令，只需使用ng-include

即可

指令是用于处理和修改DOM的强大工具，如果你不使用DOM操作，则不需要指令

Answer 2

有其他选择，但你的方法是最好的。你拥有它的方式是正确的角度方式;如果您有标准控件，请将其作为指令。

如果您愿意，可以使用templateUrl选项将HTML包含在单独的文件中，而不是在指令配置中内联：

app.directive('adminRetrieveButton', ['stateService', function (stateService) {
    return {
        restrict: 'AE',
        templateUrl: "adminButton.html",
        link: function (scope, element, attrs) {
            scope.stateService = stateService;
        }
    };
}]);

...以及adminButton.html：

<button id="retrieveButton"
        ng-disabled="!home.forms.grid.$pristine"
        ng-click="ctrl.retrieve()" >Retrieve
    <span class="fa fa-fw mlr75"
            ng-class="{'fa-spin fa-spinner': stateService.action[Network.Retrieve],
                       'fa-download': !stateService.action[Network.Retrieve]}">
    </span>
</button>

该指令可以访问其父作用域，因为它尚未设置为隔离作用域;如果你包括＆＃34;范围＆＃34;指令调用上的选项您需要传递home和ctrl变量。

您可以使用ng-include来执行此操作，但您的视图代码看起来不那么语义，注入stateService会更复杂一些。

是否有使用指令来创建模板代码的替代方法？

2 个答案: