AngularJS：成功 HTTP 请求后更新指令范围答案

【问题标题】：AngularJS : Update directive scope after successful HTTP requestAngularJS：成功 HTTP 请求后更新指令范围
【发布时间】：2015-03-16 11:59:31
【问题描述】：

我正在创建一个指令，以根据控制器功能中 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]。我做对了吗？

【问题讨论】：

你在哪里做这个请求？在控制器中还是在哪里？
请分享您请求数据的整个部分 js 代码
我已经用必要的代码更新了我的帖子。
但正如我所见 - 这是另一个范围 - 你有 2 个不同的范围 - 一个用于指令，另一个用于控制器。
是的，你是对的，所以我想从控制器更新指令范围。有可能吗？我们可以使用 watch in 指令来获取 msg & type 的更新值吗？

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

控制器代码仅在初始化期间执行。如果您希望每次指令的数据更改时都执行代码（例如，通过双向数据绑定），那么您可以用 watch 包围代码。

在你的例子中：

controller:function($scope){
  $scope.$watch('msg', function(newValue, oldValue) {
    console.log($scope.msg);
  });
}

【讨论】：

【解决方案2】：

最后使用手表解决了我的问题。但我仍然不明白为什么 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);  
          }
         }})

【讨论】：

【解决方案3】：

代码应该可以工作。

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

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

【讨论】：