AngularJS - 再次单击时，ng-click 不会删除先前单击的修改

Question

所以我正在尝试完成这个例子：http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

但是，由于某种原因，当我单击一个 div，然后单击另一个 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 或其他）的实例中。