AngularJS:在成功的HTTP请求后更新指令范围

AngularJS : Update directive scope after successful HTTP request

本文关键字：更新 指令 范围 请求 HTTP 成功 AngularJS      更新时间：2023-09-26

我正在创建一个指令来显示具有滑降效果的成功/失败消息，具体取决于控制器函数中 http 请求的响应。下面是基本实现。

<slidemsg msg="rmsg" type="rtype"></slidemsg>

我的指令 ：

app.directive('slidemsg',function(){
       return {restrict : 'EA',
              scope:{msg:'=',type:'='},
              templateUrl:'views/slideMsg.html',       
              controller:function($scope){
               console.log($scope.msg);
               console.log($scope.type);
             }}})

Http 请求 ：

app.controller('empController',function($scope,employeeService,$window,$timeout){ 
  $scope.deleteUser=function(id)
 {
   var deleteUser = $window.confirm('Are you absolutely sure you want to delete?'); 
  if (deleteUser) { 
        employeeService.deleteEmployee(id).success(function(response){
       if(response.success)
        {   console.log('Deleted');
            $scope.rmsg="Successfully Deleted";
            $scope.rtype=true; 
         } 
}
 }});

当我的页面首次加载时，指令自动被调用加载模板，并将 rmsg 和 rtype 控制台为 undefined。但是当我在成功函数中设置 rmsg 和 rtype 时，http 请求成功后，指令既没有被调用，也没有控制台中写的任何内容。我也尝试使用$apply但它抛出错误 [$rootScope：inprog]。我这样做的方式是否正确？

代码应该可以工作。

您的console.log不应该，因为它们在指令初始化时被调用一次。所以，就像你说的，起初参数是undefined的，这就是你在控制台中看到的。

当您在成功响应后设置变量时，angular 知道更新指令。因此，例如，如果您有<div ng-if="rtype">Test</div>，那么它将正确显示。但控制台不会在控制器声明中被召回。

好吧，终于使用手表解决了我的问题。但我仍然不明白为什么 angularjs 即使在使用双向绑定后也没有从控制器更新我的指令范围。下面是更新的代码。

app.directive('slidemsg',function(){
   return {restrict : 'EA',
          scope:{msg:'=',type:'='},
          templateUrl:'views/slideMsg.html',
          link:function(scope, element, attrs)
          {
           scope.$watch('msg',function(newmsgvalue,oldmsgvalue){},true);
           scope.$watch('type',function(newtypevalue,oldtypevalue){},true);  
          }
         }})

控制器代码仅在初始化期间执行。如果您希望每次指令的数据更改时都执行代码（例如，通过双向数据绑定），则可以用手表将代码括起来。

在您的示例中：

controller:function($scope){
  $scope.$watch('msg', function(newValue, oldValue) {
    console.log($scope.msg);
  });
}
相关文章：