Question

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

然而，出于某种原因，当我点击一个div，然后点击另一个div时，它不会从前一个div中删除“active”类，因此它会突出显示两者，因此我的所有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或其他）的实例中。

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

1 个答案: