0

だから私はこの例を完成させようとしています: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

ただし、何らかの理由で、ある div をクリックしてから別の 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>
4

1 に答える 1

3

各単一の質問には独自の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または何でも) のインスタンス内に存在します。

于 2013-07-06T20:30:15.703 に答える