javascript - AngularJS : Update directive scope after successful HTTP request

Question

我正在创建一个指令，根据 Controller 函数中 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 控制台为 未定义。但是在成功的 http 请求之后，当我在 success 函数中设置 rmsg 和 rtype 时，指令不会得到我也尝试使用 $apply 但它抛出错误 [$rootScope:inprog]。 我的做法正确吗？

Answer 1

代码应该可以工作。

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

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