Question

请检查此codepen，当单击按钮单击我重置名称时，名称输入应重置为空，当我在指令范围内执行console.log时，我会请参阅name设置为空字符串，但视图中的值未更新。怎么了？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

当ng-model值发生变化时，AngularJS视图不会更新

4 个答案:

重要