AngularJS - 納克單擊單擊時沒有刪除以前的點擊的修改再次

Question

所以我想acomplish這個例子：http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

然而，由於某些原因，當我點擊一個DIV，然後在另一個，它不會從前面的div中刪除「active」類，因此它會突出顯示兩者，因此，如果單擊所有div，則所有div都會顯示活動類。我想讓它到達實際刪除類的地方，如果我點擊正文的其他任何地方，以及如果我點擊任何其他div，如小提琴示例。

我的jsfiddle http://jsfiddle.net/GeorgiAngelov/jUj56/4/

<div ng-controller="MyCtrl"> 
      <button class="addQuestionButton btn btn-primary" ng-click="AddRootQuestion(questions)">Add node</button> 
     <div ng-repeat="question in questions" ng-include="question">  </div> 

    <script type="text/ng-template" id="question"> 
    <!-- Single question starts here --> 
     <div ng-controller="QuestionController" ng-class="{active : isSelected(question)}"> 
      <button class="btn btn-primary" ng-click="AddSubQuestion(question)">Add node</button> 
      <button class="btn btn-primary" ng-click = "editQuestion(question)">Edit Question</button> 
     </div> 
     <div ng-repeat="question in question.nodes" ng-include="question"> 
     </div>      
</script> 
</div> 

Answer 1

由於每一個問題都有自己的QuestionController，並QuestionController就是$scope.selected被設定，它們不會相互影響。也就是說，當您單擊編輯時，它將爲該單獨的控制器設置selected。

最簡單的方式點擊編輯時，解決它是設置在父範圍的屬性（含控制器）：

function MyCtrl($scope) { 
    $scope.questions = []; 

    $scope.AddRootQuestion = function(questions) { 
     questions.push({name: 'Question', nodes: []}); 
    }; 

    // added this method --v 
    $scope.setSelected = function(q) { 
     $scope.selected = q; 
    }; 
} 

function QuestionController($scope) { 
    $scope.choices = []; 
    $scope.choice = {text: ''}; 

    $scope.AddSubQuestion = function(question, $element) { 
     var newName = 'Name of question goes here'; 
     question.nodes.push({name: newName, id: 'it goes in here', nodes: []}); 
    }; 

    // modified this method --v 
    $scope.editQuestion = function(question){ 
     $scope.setSelected(question); 
    }; 

    $scope.isSelected = function(question) { 
     return $scope.selected === question; 
    }; 
} 

但這使得QuestionController依賴於父控制器。一個更好的設計是將所有的數據和數據處理方法，移動到服務：

var myApp = angular.module('myApp',[]); 

myApp.factory('Question', function() { 
    return { 
    questions: [], 

    addRootQuestion: function() { 
     this.questions.push({name: 'Question', nodes: []}); 
    }, 

    addSubQuestion: function(question, data) { 
     question.nodes.push(data); 
    }, 

    setSelectedQuestion: function(question) { 
     this.selectedQuestion = question; 
    }, 

    isSelectedQuestion: function(question) { 
     return this.selectedQuestion == question; 
    } 
    }; 
}); 

然後，您可以注入服務到你的控制器：

function MyCtrl($scope, Question) { 
    $scope.questions = Question.questions; 

    $scope.AddRootQuestion = function() { 
    Question.addRootQuestion(); 
    }; 
} 

function QuestionController($scope, Question) { 
    $scope.choices = []; 
    $scope.choice = {text: ''}; 

    $scope.AddSubQuestion = function(question, $element) { 
    var newName = 'Name of question goes here'; 
    Question.addSubQuestion(question, { 
     name: newName, id: 'it goes in here', nodes: [] 
    }); 
    }; 

    $scope.editQuestion = function(question){ 
    Question.setSelectedQuestion(question); 
    }; 

    $scope.isSelected = function(question) { 
    return Question.isSelectedQuestion(question); 
    }; 
} 

例子：http://jsfiddle.net/BinaryMuse/pZkBv/

如果您願意，您可以使用JavaScript OOP原則構建更豐富的數據模型;例如，您可以使用Question實例來處理問題，這些問題本身位於QuestionContainer（或Survey或Test或其他）的實例中。