Question

嗨，我有一个像

这样的指令

mainApp.directive('myMenu',function(){
        return {
            restrict : 'E',
            scope :{menuItems : "=menuItems"},
            compile: function(element, attributes) {
                var linkFunction = function($scope, element, attributes){
                    for (i = 0;i<$scope.menuItems.length;i++){
                         element.append('<li><a href="#home">'+$scope.menuItems[i].name+'</a></li>');
                    }
                }
                return linkFunction;
            }

        }
    });

我在HTML中使用它如下所示

   <my-menu menuItems="menuItems"></my-menu>

但是在控制台中我收到的错误就像 TypeError：无法读取未定义的属性“长度”

Answer 1

问题可能是，然后执行链接阶段，可能无法加载菜单项，因此$scope.menuItems可能未定义。

更好的解决方案可能是

＆＃13;

var mainApp = angular.module('my-app', [], function() {})

mainApp.controller('AppController', function($scope) {
  $scope.menuItems = [{
    name: 'one'
  }, {
    name: 'two'
  }, {
    name: 'three'
  }, {
    name: 'four'
  }];
})

mainApp.directive('myMenu', function() {
  return {
    restrict: 'E',
    scope: {
      menuItems: "="
    },
    template: '<ul><li ng-repeat="item in menuItems">{{item.name}}<a href="#home"></a></li></ul>'
  }
});

＆＃13;

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

<div ng-app="my-app" ng-controller="AppController">
  <my-menu menu-items="menuItems"></my-menu>
</div>

＆＃13;

如果您不能使用模板，那么

＆＃13;

var mainApp = angular.module('my-app', [], function() {})

mainApp.controller('AppController', function($scope) {
  $scope.menuItems = [{
    name: 'one'
  }, {
    name: 'two'
  }, {
    name: 'three'
  }, {
    name: 'four'
  }];
})

mainApp.directive('myMenu', function() {
  return {
    restrict: 'E',
    scope: {
      menuItems: "=menuItems"
    },
    link: function($scope, element, attributes) {
      $scope.$watch('menuItems', function(value) {
        element.empty();
        angular.forEach(value, function(item) {
          element.append('<li><a href="#home">' + item.name + '</a></li>');
        });
      });
    }

  }
});

＆＃13;

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

<div ng-app="my-app" ng-controller="AppController">
  <my-menu menu-items="menuItems"></my-menu>
</div>

＆＃13;

Answer 2

在编译函数中使用$scope.$eval(attributes.menuItems)来获取menuItems

Answer 3

问题是我使用的名称，如指令中的menuItems应该等于菜单项，通过将menuItems重新定位到菜单来解决问题。

问题与自定义指令的范围有关

3 个答案: