ng-model 值更改时，AngularJS 视图不会更新

Question

请检查此代码笔，当单击按钮单击我重置名称时，名称输入应重置为空，当我在指令范围上执行console.log 时，我看到@ 987654323@ 设置为空字符串，但视图中的值未更新。怎么了？

CodePen example

angular.module('mainApp', [])
  .directive('myTab', function() {
    return {
      restrict: 'E',
      template: 'name: <input type="text" ng-model="name">',
      controller: function($location, $scope) {
        $scope.name = 'myname';
        $('#clickMeToReset').on('click', function() {
          $scope.name = '';
        })
      }
    };
  })
  .directive('myMenu', function() {
    return {
      restrict: 'E',
      template: '<button id="clickMeToReset">click me to reset name</button>'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="mainApp">
  <my-menu></my-menu>
  <my-tab></my-tab>
</div>

Answer 1

之后

$scope.name = '';

做一个

$scope.$apply();

Answer 2

当您在 Angular 中使用其他库（如 jquery）时，更改变量如 $scope应该手动广播。

 $('#clickMeToReset').on('click', function(){
        $scope.name = '';
        $scope.$apply();
})

所以$scope.$apply(); 会成功的！

Answer 3

使用以下代码修改您的控制器代码：

controller: function($location,$scope, $timeout){
  $scope.name = 'myname';
  $('#clickMeToReset').on('click', function(){
    $timeout(function() {
       $scope.name = '';
    });
  })
}

angular.module('mainApp', [])
  .directive('myTab', function() {
    return {
      restrict: 'E',
      template: 'name: <input type="text" ng-model="name">',
      controller: function($location, $scope, $timeout) {
        $scope.name = 'myname';
        $('#clickMeToReset').on('click', function() {
          $timeout(function() {
            $scope.name = '';
          });
        })
      }
    };
  })
  .directive('myMenu', function() {
    return {
      restrict: 'E',
      template: '<button id="clickMeToReset">click me to reset name</button>'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp">
  <my-menu></my-menu>
  <my-tab></my-tab>
</div>

由于您使用 jQuery 来更改值，这超出了 Angular 的上下文，因此 Angular 不知道更改。所以你需要告诉 Angular 发生了一些变化。所以我们使用$timeout 服务来实现这一点。我们也可以使用$scope.$apply()，但是当摘要循环已经在进行时，这可能会失败。

重要

您应该改用ng-click 并尽可能删除对jQuery 的依赖，因为jQuery 本身也是一个像Angular 一样的大库（请参阅下面的工作示例）：

angular.module('mainApp', [])
  .directive('myTab', function() {
    return {
      restrict: 'E',
      template: 'name: <input type="text" ng-model="name">',
      controller: function($scope) {
        $scope.name = 'myname';
        $scope.clearName = function() {
          $scope.name = '';
        }
      }
    };
  })
  .directive('myMenu', function() {
    return {
      restrict: 'E',
      template: '<button ng-click="clearName()">click me to reset name</button>'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="mainApp">
  <my-menu></my-menu>
  <my-tab></my-tab>
</div>

Answer 4

我希望根据我的想法，这段代码对你有帮助。只改js代码剩下的html代码是正确的。

   var mainApp = angular.module('mainApp', []);
   mainApp.directive('myTab', function() {
   return {
    template: 'name: <input type="text" ng-model="name">',
    controller: function($location,$scope){ debugger;
      $scope.name = 'myname';
      $('#clickMeToReset').on('click', function(){
        $scope.name = '';
      })
    }
  };
})
.directive('myMenu', function() {
  return {
    name:"clickMeReset",
    template: '<button id="name" ng-click="clear()">click me to reset name</button>',
    controller:
    function($location,$scope){
      $('#name').on('click',       function(){
        $scope.name = '';
      })
    }
  };
});