Question

我想创建一个指令来替换HTML中的一些代码。

这就是我现在所拥有的：

    <div class="gridFooter" ng-show="home.dataRetrieved">
        <span ng-show="(home.grid.data).length">{{ (home.grid.data).length + " rows retrieved - " +  home.grid.view.length + " displayed" }}</span>
        <span ng-show="!(home.grid.data).length">There are no tests that match your selection criteria</span>
    </div>

我创建了这个基本指令但是有些东西缺失了：

app.directive('adminGridFooter', function () {
    return {
        template: '<div class="gridFooter" ng-show = "home.dataRetrieved" >\
                   <span ng-show = "(home.grid.data).length" >\
                   {{ (home.grid.data).length + " rows retrieved - " + home.grid.view.length + " displayed" }}\
                   </span >\
                   <span ng-show="!(home.grid.data).length" >xx</span >\
                   </div>'
    };
});

我怎样才能这样做，所以当我调用指令时，我可以在元素内传入字符串“xx”，并且我的指令只是假设当前范围，以便home.dataRetrieved可以不加改变地工作？像

这样的东西

另一个问题。我可以使指令完全替换我对<admin-grid-footer></admin-grid-footer>的调用。我该怎么做才能取代元素呢？

Answer 1

您正在寻找transclude和replace：

app.directive('adminGridFooter', function () {
    return {
      replace:true,
      transclude:true,
        template: '<div class="gridFooter" ng-show = "home.dataRetrieved" >\
                   <span ng-show = "(home.grid.data).length" >\
                   {{ (home.grid.data).length + " rows retrieved - " + home.grid.view.length + " displayed" }}\
                   </span >\
                   <span ng-show="!(home.grid.data).length" ng-transclude></span >\
                   </div>'
    };
});

PLUNKER

Answer 2

首先，您可以使用templateUrl属性并将其指向单独的HTML文件，而不是将整个HTML编写为字符串。

第二，您可以按元素限制指令type，因此您只能将其用作元素（而不是attribute或class）。以下是如何执行此操作：restrict: 'E'。

最后，您还可以指定link函数，您可以在其中获取元素的属性并执行您需要的任何操作。

因此，在这些更改之后，您的代码可能如下所示：

app.directive('adminGridFooter', function () {
    return {
        restrict: 'E',
        templateUrl: 'adminGridFooter.html',    // this contains your HTML
        link: function(scope, element, attrs) {
            scope.xx = attrs.xx;
        }
    }
});

你可以像这样使用它：

<adminGridFooter xx="someValue"></adminGridFooter>

最后一个问题：

...我的指令是否会假设当前范围，以便home.dataRetrieved可以正常工作？

是，默认情况下，它使用调用指令的范围，但您可以过滤范围变量并仅使用其中一些，你需要在你的指令中。您可以使用隔离范围来实现此目的。

此外，我强烈建议阅读有关指令的知识，然后继续使用它们。

The official documentation是一个很好的起点。

Answer 3

您可以像这样更改指令。

   angular.module('onboardingApp').directive("adminGridFooter",function () {
    return {
        restrict: 'E',
        link: function(scope, element, attributes) {
            scope.customMessage = attributes["custommessage"];
        },
        templateUrl: '<div class="gridFooter" ng-show = "home.dataRetrieved" >\
               <span ng-show = "(home.grid.data).length" >\
               {{ (home.grid.data).length + " rows retrieved - " + home.grid.view.length + " displayed" }}\
               </span >\
               <span ng-show="!(home.grid.data).length" >{{customMessage}}</span >\
               </div>',

    };
});

然后在html中传递你想要的值

<admin-grid-footer customMessage="what ever you want"></admin-grid-footer>

Answer 4

将scope属性设置为true，因此可以在指令中访问范围。要么您可以将数据作为属性传递。

app.directive('adminGridFooter', function() {
return {
restrict: 'E',
replace: true,
scope: true,
template: '<div class="gridFooter" ng-show="home.dataRetrieved" >\
               <span ng-show = "home.grid.data.length > 0" >\
               {{ (home.grid.data).length + " rows retrieved - " + home.grid.view.length + " displayed" }}\
               </span >\
               <span ng-show="home.grid.data.length === 0">There are no tests that match your selection criteria</span>\
               </div>'
};
});

或者

scope:{
   home:'='
}

PLUNKER

如何使指令接受我从元素内部传入的一些文本？

4 个答案: