使用$範圍擴展到在指令

我在使用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

使用$範圍擴展到在指令

回答

相關問題