Question

我想将一些html重写成一个指令，但是当涉及到使用动态模板的指令时，我处于黑暗中。基本上我需要做的是能够将参数传递给模板，以便我可以使用不同的值重复使用它。

现在我刚刚将参数传递给指令函数，但我知道这是错误的。当您创建使用restrict: 'A'的指令时，您可以传递如下参数：

<div error="somevalue"></div>

然后attrs可以使用哪个。但是当它使用restrict: 'E'时它是如何工作的？

我怎样才能达到我想要的目标？

forumApp.directive('error', [function(row, isRowAvailable, isRowUnchanged) {

    return {
        restrict: 'E',
        template: '<div ng-if="row.model === "' + row + '">
                     <span class="error">*</span>
                     <div class="error-cell-inner" ng-if="row.model === 'row' && user[' + row + '].length > 0">
                         <span ng-if="' + isRowUnchanged + '"></span>
                         <span ng-if="' + isRowAvailable + ' && !' + isRowUnchanged + '" class="available">The name is available</span>
                         <span ng-if="!' + isRowAvailable + ' && !' + isRowUnchanged + '" class="error weight-override">The name is already taken</span>
                     </div>
                   </div>'
    }
}]);

Answer 1

这有助于理解自定义指令如何以简单的方式工作。 http://www.ng-newsletter.com/posts/directives.html

尝试这些方面的东西。这里我使用的是AE，这意味着我允许将该指令用作属性或元素。但你也可以将它限制在E。

<rb-add-button text="Add New Parcel" ng-disabled="!storeNumber" ng-click="addParcel()"></rb-add-button>


appRedB.directive('rbAddButton', function () {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            text: '@'
        },
        template: '<button class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i> {{ text || "Add"}}</button>'

    };
});

如何传递限制参数：＆＃39; E＆＃39;指令使模板动态化？

1 个答案: