Question

我有点角色并且有一个不安全的问题。我试图用一个函数更新绑定到我的控制器中div的变量，当单击一个按钮时调用该函数。（该功能通过ng-click绑定到按钮。）单击按钮时，即使变量已更改，显示的值也不会更改。但是，如果我为元素本身分配相同的更新函数，那么当我单击该元素时它会发生变化。谁能解释一下？这是我的代码：

的Javascript

angular.module('Compendium',['ngRoute'])
.config(function($routeProvider){
    $routeProvider.when('/css',{
        templateUrl:'css.html', 
        controller: 'cssCtrl'
    })
}).controller('cssCtrl',function($scope,counterhelper){
    //counterhelper($scope.data)
//counter.increment();

    $scope.increment = function(){
        alert('hey');
      $scope.display = 'Nothing'
    }
     $scope.display = 1;

      // var transform = function(){
      //  

}).factory('counterhelper',function(){
    var addOne = function(val){
        val ++;
    }
    return addOne;
})

和Html

<html ng-app = "Compendium">
<head>
<script src = "node_modules/angular/angular.js"> </script>
<script src = "node_modules/angular-route/angular-route.js"> </script>
<script src = "app.js"></script>
<script type="text/ng-template" id="css.html">
  <h1 ng-controller = 'cssCtrl' ng-click='increment()'>
    {{display}}
    </h1>
    <button ng-click = 'increment()' >Increment</button>
</script>
</head>
<body>
<div ng-view>
</div>
</body>

</html>

谢谢！

Answer 1

这里的问题是你的控制器在按钮之外，因此它无法识别附加的控制器，将其包装在div中

<div ng-controller = 'cssCtrl'>
  <h1  ng-click='increment()'>
    {{display}}
  </h1>
  <button ng-click = 'increment()' >Increment</button>
</div>

使用按钮时Angular JS双向绑定不更新

1 个答案: