Проблема с объемом пользовательской директивы

0

Привет, у меня есть такая директива,

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: не могу прочитать свойство "длина" неопределенного

  • 0
    почему бы вам не проверить undefined перед циклом if($scope.menuItems)
  • 0
    посмотрите, работает ли он, используя menuItems.length вместо $ scope.menuItems.length
Теги:

3 ответа

0

использовать $scope.$eval(attributes.menuItems) внутри функции компиляции, чтобы получить menuItems

Поделиться
0

Проблема была с именем, которое я использовал, так как menuItems в директиве должно быть равно элементам меню, решило проблему, отправив меню в меню.

Поделиться
0

Проблема может заключаться в том, что, тогда выполняется этап связывания, элементы меню могут не загружаться, поэтому $scope.menuItems могут быть неопределенными.

Лучшим решением может быть

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>'
  }
});
<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>

Если вы не можете использовать шаблон, тогда

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>');
        });
      });
    }

  }
});
<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>
Поделиться
  • 0
    Я не могу использовать его внутри шаблона, так как мне нужно другое поведение в зависимости от поступающих данных.
  • 0
    jsfiddle.net/arunpjohny/je8wLkcw/1
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню