Question

尝试从模板添加li并添加$scope.menuItems中的项目（控制器）项目不显示 http://plnkr.co/edit/Jo7Vml?p=preview

app.directive("menuDemo", function(){
   return {
      templateUrl: 'tree-renderer.html'
   }
});

Answer 1

在这里：http://plnkr.co/edit/8YV6cdCIPCjEOq3DtjAz?p=preview

首先：在指令中添加以下内容：

 scope:{
          menuItems:"=menuDemo"
  },

这样可以在使用指令时对传递给menu-demo属性的数据进行双向绑定，如果没有这个，就无法将数据传递给指令。

第二步：删除tree-renderer.html和sub-tree-renderer.html中的script标记。脚本标记仅在使用ng-include时才有用。你只是定义一个模板部分，而不是像这样使用它。

第三次在tree-renderer.html中为第一级添加顶级ng-repeat，并从index.html中删除一个。

<div ng-repeat="menuItem in menuItems">

正如您所看到的，menuItems与我在scope:{}部分中定义的内容相匹配。

第四：我添加了函数addItem和addSubItem的绑定，因此您可以定义自己的方式将项添加到指令的树外。

编辑：我移出<div ng-repeat="menuItem in menuItems"> http://plnkr.co/edit/MZ3nsY6WTG3EiNKhXjAv?p=preview的另一个问题。

正如您所看到的，我将菜单 - 演示调用放在<span>标记内的<li>标记中。这是因为它们都使用隔离范围，如果我想使用ng-repeat循环中的数据，最简单的方法是在子DOM元素中移动另一个指令。

请注意，我还将绑定元素的名称更改为menuItem（我删除了's'）。

Answer 2

这不是宣告指令的正确方法，尝试这样的事情：

angular.module('myModule')
    .directive('menu', [function () {
        return {
            restrict: 'A',
            scope: true,
            templateUrl: 'tree-renderer.html',
            link: function ($scope, $element, $attrs) {
                //here some functions that do something
            }
        };
}]);

顺便说一句，尝试改进你的问题！

Angular：来自内部html的模板并添加现有数据

2 个答案: