Question

所以在Angular.js中，我正在尝试执行以下操作：

的index.html

<div class="data-tabs-sms-scroll" ng-show="question.type == 'open'"
     ng-controller="AudioMessagesCtrl"
     ng-include="'/templates/audioMessages.html'"></div>
<div class="data-tabs-sms-scroll" ng-hide="question.type == 'open'"
     ng-controller="QuestionDetailCtrl"
     ng-include="'/templates/questionDetail.html'"></div>

app.js

ulizaApp.controller('AudioMessagesCtrl', ['$scope', 'QuestionResponse', 'ngAudio',
  function($scope, QuestionResponse, ngAudio) {
    console.log(
      'questionDetailCtrl', 
      $scope.$parent.question.id, 
      $scope.$parent.question.type
    );
  }]);

ulizaApp.controller('QuestionDetailCtrl', ['$scope', 'Question',
  function($scope, Question) {
    console.log(
      'questionDetailCtrl', 
      $scope.$parent.question.id, 
      $scope.$parent.question.type
    );
  }]);

Firefox控制台输出

"questionDetailCtrl" 563 "multi" AudioMessagesCtrl.js:6:4
"questionDetailCtrl" 563 "multi" QuestionCtrl.js:6:4
"questionDetailCtrl" 564 "open" AudioMessagesCtrl.js:6:4
"questionDetailCtrl" 564 "open" QuestionCtrl.js:6:4

我希望AudioMessagesCtrl仅在question.type等于“open”时才能实例化。并且只要question.type与open不同，QuestionDetailCtrl就会被实例化。

出于某种原因，这似乎不是解决方案。

有什么建议吗？

由于

Answer 1

ng-show/ng-hide将呈现dom，然后根据条件决定是否显示/隐藏。

仅当条件满足时，

ng-if才会呈现dom。

所以，而不是ng-show/ng-hide尝试ng-if。

<强>标记

<div class="data-tabs-sms-scroll" ng-if="question.type == 'open'"
     ng-controller="AudioMessagesCtrl"
     ng-include="'/templates/audioMessages.html'"></div>
<div class="data-tabs-sms-scroll" ng-if="question.type == 'open'"
     ng-controller="QuestionDetailCtrl"
     ng-include="'/templates/questionDetail.html'"></div>

从模板内有条件地实例化角度控制器

1 个答案: