使用$范围扩展到在指令

我在使用controllerAs语法在我的指导问题，我不知道是什么问题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

我可以用$ S应付在视图中访问这些属性和所有工作正常，但遵循约翰帕帕斯styleguide，我试图避免使用$范围。

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

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

来源

2015-11-20 shanahobo86

在指令对象中设置'bindToController：true'。 – jperezov

虽然看看你的代码 - 你在这里有什么在你的JS文件？在'multiChoiceQuestionController'甚至到达之前你有一个return语句。 – jperezov

你是对的，整理起来，但仍然有相同的问题 – shanahobo86

我创建了这个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'; 
}

我将templateURL替换为内联模板，它似乎工作正常。请检查。

我看到你的中继器不工作的唯一问题是选项数组只有1个元素。你可能想要检查超过1个元素。

来源

2015-11-20 06:01:09

使用$范围扩展到在指令

回答

相关问题