Question

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

<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＆amp; rtype as undefined 。但是当我在成功函数中设置rmsg和rtype成功的http请求之后，指令不会被调用任何写入其中的任何控制台。我也尝试使用$ apply但它会抛出错误[ $ rootScope：inprog。我是以正确的方式做到的吗？

Answer 1

代码应该有效。

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

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

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

Answer 3

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

在你的例子中：

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

AngularJS：成功发出HTTP请求后更新指令范围

3 个答案: