Question

我在指令中使用controllerAs语法时遇到问题，我不确定问题是什么（虽然我怀疑与隔离范围有关）

简而言之，我希望能够通过使用vm.options，vm.addOption等来访问视图中此指令控制器的属性。

function MultiChoiceQuestion() {
        var directive = {
            restrict: 'E',
            templateUrl: 'widgets/multi-choice.html',
            controller: multiChoiceQuestionController,
            controllerAs: 'vm',
            bindToController:true
        };
        return directive;
}

function multiChoiceQuestionController(){
            var vm = this;
            vm.options=[{name:"option1", answer:""}];

            vm.addOption = function(){                
                alert("add clicked");

            }

            vm.deleteOption = function(option){
                alert("delclicked");
            }
        }

在HTML

中

<div ng-repeat="option in vm.options"> // this isn't working

我可以使用$ scope来访问视图中的这些属性，并且一切正常，但遵循John Papas样式指南，我试图避免使用$ scope。

function MultiChoiceQuestion() {
    var directive = {
        restrict: 'E',
        templateUrl: 'widgets/multi-choice.html',
        controller: multiChoiceQuestionController
    };
    return directive;
}

function multiChoiceQuestionController($scope){
        $scope.options=[{name:"option1", answer:""}];

        $scope.addOption = function(){}

        $scope.deleteOption = function(option){
           //
        }
    }
<div ng-repeat="option in options"> // works

如果有人能告诉我自己做错了什么，我将不胜感激。感谢

Answer 1

我创建了这个plunkr。

function MultiChoiceQuestion() {
  var directive = {
    restrict: 'E',
    template: '<div ng-repeat="option in vm.options">{{option.name}}</div>',
    controller: multiChoiceQuestionController,
    controllerAs: 'vm',
    bindToController: true
  };
  return directive;
}

function multiChoiceQuestionController() {
  var vm = this;
  vm.options = [{
    name: "option1",
    answer: ""
  },
  {
    name: "option2",
    answer: ""
  }];

  vm.addOption = function() {
    alert("add clicked");

  }

  vm.deleteOption = function(option) {
    alert("delclicked");
  }
  vm.name = 'Pascals';
}

我用template和inline模板替换了templateURL，它似乎工作正常。请检查。

我看到你的转发器不能正常工作的唯一问题是options数组只有1个元素。你可能想检查多个元素。

在指令中使用$ scope而不是controllerAs

1 个答案: