Question

我正在创建一个自定义指令。这里，我使用的是在控制器中定义的itemsList。此itemsList包含我要在页面上显示的所有数据。这是我的自定义指令

directives.directive('studenttemplate', function($compile) {
     return {
            restrict: "E",
            scope: true,
            link: function(scope, element, attrs) {
                var htmlcontent = "";
                var studentItem = scope.itemsList;
                console.log("Inside the Directive", scope.items);

               for (var i = 0; i < studentItem; i++){
                        htmlcontent = htmlcontent
                            + "<tr>"                    
                    + "<td>"
                    + studentItem[i].name
                    + "</td>"   
                    + "<td>"
                    + studentItem[i].mobile
                    + "</td>"
                    + "<td>"
                    + studentItem[i].address
                    + "</td></tr>"
                }
            element.append(htmlcontent)
                $compile(element.contents())(scope);
             }
        }
});

我在undefined获得scope.itemsList。但是，当我使用普通的HTML代码时，它工作正常。我不知道是什么原因引起的。

这是我的控制器代码

$scope.items = stuservice.getList(defaultUrl);
        $scope.items.then(function(data) {
            $scope.itemsList = data.list;
        });

任何帮助都会受到赞赏。感谢

Answer 1

您可能正在运行异步调用来获取数据，同时立即评估该指令。请尝试以下方法：

link: function(scope, element, attrs) {
    // Watch the itemsList, then evaluate the directive
    scope.$watch('itemsList', function(newVal, oldVal) {
        var htmlcontent = "";
        var studentItem = newVal;
        console.log("Inside the Directive", newVal);

        for (var i = 0; i < studentItem; i++){
            htmlcontent = htmlcontent
                + "<tr>"                    
                + "<td>"
                + studentItem[i].name
                + "</td>"   
                + "<td>"
                + studentItem[i].mobile
                + "</td>"
                + "<td>"
                + studentItem[i].address
                + "</td></tr>"
        }
        element.append(htmlcontent)
        $compile(element.contents())(scope);
    }

Answer 2

您应该将itemsList传递给您的指令，该指令在您的标记中定义指令并绑定该属性。

<studenttemplate items-list="itemsList"></studenttemplate>

directives.directive('studenttemplate', function($compile) {
 return {
        restrict: "E",
        scope: {
             itemsList: '='
        },
        link: function(scope, element, attrs) {
            if(!angular.isArray(scope.itemsList)) {
                return;
            }
            console.log('studenttemplate got itemsList:', scope.itemsList);
        }

Answer 3

您不需要每次都创建每一行。 ng-repeat将为您解决问题。在隔离范围内，您需要从itemsList属性中的父控制器传递您想要的范围变量的item-list值。 =符号表示itemsList对象与控制器双向绑定。

<强>标记

<studenttemplate item-list="itemsList"></studenttemplate>

<强>指令

directives.directive('studenttemplate', function($compile) {
    return {
        restrict: "E",
        scope: {
            itemsList: '='
        },
        link: function(scope, element, attrs) {
            console.log("Inside the Directive", scope.itemsList);
            var htmlcontent = "<tr ng-repeat='item in itemsList'><td>item.name</td><td>item.mobile</td><td>item.address</td></tr>"
            element.append(htmlcontent)
            $compile(element.contents())(scope);
        }
    }
});

AngularJS：将List添加到自定义指令中不起作用

3 个答案: