Question

这是html：

<body ng-app="myCatApp">
        <div ng-controller="catagoryController">
            <add-remove-lister list="catagories"></add-remove-lister>
        </div>
    </body>

这是JS：

    app.controller('catagoryController', ['catagoryList', '$scope', function(catagoryList, $scope) {
      $scope.catagories = catagoryList.catagoryList;
    }]);

    app.directive('addRemoveLister', [function () {
        return {
            scope: {
                list: '='
            },
template: function(tElement, tAttrs, scope) {
            templateHTML = '<ul>';
            var list = scope.list;
            for (o = 0; o < list.length; o++) {
                var curObject = scope.list[o];
                templateHTML +='<li ng-repeat="listItem in list"><button type="button" ng-hide="listItem.userSelected" ng-click="addToList()">Add</button>';
                templateHTML +='<button type="button" ng-hide="listItem.userSelected" ng-click="removeFromList()">Remove</button>{{listItem.text}}';
                for (var prop in curObject) {
                    if (curObject.hasOwnProperty(prop) && prop.constructor === Array) {
                        templateHTML += '<add-remove-lister list="listItem.'+ prop +'"></add-remove-lister>';
                    }
                }
                templateHTML += '</li>';
            }
            templateHTML += '<ul>';
            return templateHTML;
        }
        }
    }]);

代码无法正常工作。当我在指令中设置断点时，我可以看到该列表只是字符串“catagories”。我希望它是控制器范围内的类别对象...

让我稍微谈谈我想要做的事情：

我正在尝试构建一个指令，它将接收任何数组并从中生成一个列表。假设是： 1）数组中的所有元素都是至少具有{text：'text'，userSelected：'bool'}

属性的对象

当指令遇到列表中具有属性的对象时，该对象本身就是一个数组（也假设它包含具有上述两个属性的对象），它需要在该数组上递归调用自身。

该指令还需要显示每个列表项旁边的按钮，以允许用户更改对象上的userSelected属性（从而将其添加到用户“选项”）

Answer 1

尝试使用此模板功能

template: function(tElement, tAttrs, scope) {
        templateHTML = '<ul>';
        templateHTML +='<li ng-repeat="listItem in list"><button type="button" ng-hide="listItem.userSelected" ng-click="addToList()">Add</button>';
        templateHTML +='<button type="button" ng-hide="listItem.userSelected" ng-click="removeFromList()">Remove</button>{{listItem.text}}';
        templateHTML += '<add-remove-lister ng-repeat="(key, val) in listItem" ng-if="val.length" list="val"></add-remove-lister>';
        templateHTML += '</li>';
        templateHTML += '<ul>';
        return templateHTML;
}

请注意，您可以仅使用模板执行上述操作，模板功能不是必需的。

模板功能的主要原因是允许您修改原始HTML的DOM，或从原始元素中提取部分以进行手动转换。

此外，我的指令中已经存在一些问题（您在模板中引用的函数必须在指令的作用域中定义，并且由于您使用的是隔离的作用域，因此无法引用函数您的父作用域。您还必须将这些方法作为指令的属性传递，或者使用其他一些机制来添加或删除元素。

这是Working Plunk。

Answer 2

您可以通过以下方式访问列表

app.directive('addRemoveLister', [function () {
    return {
        restrict: 'E',
        scope: {
            list: '='
        },
        template: "test {{list}}",
        link: function (scope, element, attrs) {
          console.log(scope.list);
        },
        controller: function (scope) {
          console.log(scope.list);
        }
    }
});

或者您可以在链接阶段

中编译动态模板

app.directive('addRemoveLister', function ($compile) {
  var getTemplate = function(list) {
        var templateHTML = '<ul>';
        for (o = 0; o < list.length; o++) {
            var curObject = scope.list[o];
            templateHTML +='<li ng-repeat="listItem in list"><button type="button" ng-hide="listItem.userSelected" ng-click="addToList()">Add</button>';
            templateHTML +='<button type="button" ng-hide="listItem.userSelected" ng-click="removeFromList()">Remove</button>{{listItem.text}}';
            for (var prop in curObject) {
                if (curObject.hasOwnProperty(prop) && prop.constructor === Array) {
                    templateHTML += '<add-remove-lister list="listItem.'+ prop +'"></add-remove-lister>';
                }
            }
            templateHTML += '</li>';
        }
        templateHTML += '<ul>';
        return templateHTML;
  }

    return {
        restrict: 'E',
        scope: {
            list: '='
        },
        link: function(scope, element, attrs) {
            var el = $compile(getTemplate(scope.list))(scope);
            element.replaceWith(el);
        }
    };
});

Angular指令不识别属性

2 个答案: