當ng-model值更改時，AngularJS視圖不會更新

Question

請檢查這個codepen，當點擊按鈕時單擊我重置名稱 ，輸入的名稱應該重置為空，當我在指令范圍上執行console.log時，我確實看到name被設置為空字符串，但是值在視圖未更新。 怎么了？

CodePen示例

 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

使用以下內容修改控制器代碼：

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 3

當你在角度中使用像jquery這樣的其他庫時，對諸如$scope類的變量的更改應該手動廣播。

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

所以$scope.$apply(); 會做的！

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 = '';
      })
    }
  };
});