AngularJS视图没有'当ng模型值发生变化时，t更新

AngularJS view doesn't update when ng-model value changed

本文关键字：变化 更新 模型 ng 视图 AngularJS      更新时间：2024-06-30

请检查此代码笔，当单击按钮单击我重置名称时，名称输入应重置为空，当我在指令范围上执行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>

之后

$scope.name = '';

进行

$scope.$apply();

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

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

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

使用以下内容修改控制器代码：

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>

我希望根据我的想法，这段代码能帮助你。只有更改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 = '';
      })
    }
  };
});
相关文章：