Question

有人可以帮我理解为什么ng-click没有更新课程吗？

heading.onClick()更新控制器的isOpen属性。如果为false，则该类不会删除collapsed属性。

 .... (this is inside a controller aliased `heading`)
 <div ng-class="{'collapsed': !heading.isOpen}" ng-click="heading.onClick()"></div>


directive:
...
templateUrl: '/that/code/above',
controllerAs: 'heading',
controller: function(){
    var self = this;
    self.isOpen = false;
    self.onClick = function(){
        self.isOpen = !self.isOpen;
    };
}

Answer 1

在您的方案中，只有一些问题。

您的引号可能需要转义，因为您是交替的单次和双次之间的几次，或者您可能需要使用模板而不是templateUrl
如果您使用的是角度1.3+，而不是为此分配自我可以使用scope：true属性，并使用'this'。

function myDirective() {
  return{
    restrict: 'AE',
    template: "<div ng-class='{\"collapsed\": !heading.isOpen}' ng-click='heading.onClick()'>Click on me</div>",
    scope: true,
    controller: function(){
                   this.isOpen = false;
                   this.onClick = function(){
                   this.isOpen = !this.isOpen;
                        
                        // in some situations you might need to call $apply() to get it to digest changes.
                        // for example if you change isOpen through a non-angular click angular wouldn't know
                        // to update the class until you call this.$apply()
                        
                        //this.$apply();
                   };
      
    },
    controllerAs: 'heading'
      
    };
  }

var app = angular.module('app', [])
                 .directive('myDirective', [myDirective]);

.collapsed {
  color: red;
}

<!DOCTYPE html>
<html >
  <head>
    <link rel="stylesheet" href="style.css">        
  </head>

  <body ng-app="app">
     <my-directive></my-directive>  
     
     <script src="https://code.angularjs.org/1.4.0/angular.js"></script>
     <script src="script.js"></script>
  </body>
</html>

在你的情况下，你可能不需要担心这一点，但我遇到了一个我必须调用$ scope的场景。$ apply（）（或者。$ apply（））通知角度我的变量在不知情的情况下发生了变化。

Angular ng-class没有更新

1 个答案: