3

我的代碼是非常簡單的:AngularJS遵守指令屬性的表達,繼承範圍動態

.controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) { 
    $timeout(function() { 
     $scope.x = 5; 
    }, 2000); 
    }]) 
.directive('ngHey', ['$parse', function ($parse) { 
    return { 
     'restrict': 'A', 
     'scope': true, 
     'link': function($scope, el, atr) { 

     var go = function() { 
      if ($parse(atr.ngHey)()) { 

       alert('oiiiiiii'); 
      } 
      }; 

     atr.$observe('ngHey', function (val) { 
      if (val) { 

      go(); 
      } 
     }); 
     } 
    }; 
    }]); 

//view.html

<div ng-controller="Ctrl"> 
<span ng-hey="x > 3"></span> 
</div> 

我希望能夠火的時候,指令表達的變化和當它是真的或假的,但目前的警報從來沒有發生......

它的工作原理只有當我做這樣的事情:

<div ng-controller="Ctrl"> 
    <span ng-hey="{{x > 3}}"></span> 
    </div> 

這是不是我要什麼,我想指令執行的表達式爲NG-IF或NG-隱藏等等

任何提示或幫助表示讚賞,感謝

+0

範圍$的eval(atr.ngHey) – mohamedrias 2015-03-03 11:30:34

+0

@mohamedrias試過了,剛剛更換$範圍$的eval(atr.ngHey)();在$ parse(atr.ngHey);但是當表達式變爲真時,它似乎沒有被觸發 – sbaaaang 2015-03-03 11:41:18

+0

我已經更新了答案。請檢查:) – mohamedrias 2015-03-03 11:49:28

回答

3

在這種情況下,您不能使用$observe,因爲它Observes an interpolated attribute.documentation)。在這種情況下,你可以在這樣的範圍內使用$watch

.directive('ngHey', ['$parse', 
    function($parse) { 
     return { 
      scope: true, 
      link: function($scope, el, atr) { 

       var go = function(value) { 
        if (value) { 
         alert('oiiiiiii'); 
        } 
       }; 

       $scope.$watch(atr.ngHey, function(val) { 
        if (val) { 
         go(val); 
        } 
       }); 
      } 
     }; 
    } 
]); 

演示:http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

UPD。基於業務方案的意見,更新的指令看起來像:

.directive('ngHey', ['$parse', 
    function($parse) { 
     return { 
      scope:{ngHey: '='}, 
      link: function($scope, el, atr) { 

       var go = function(value) { 
        if ($scope.ngHey) { 
         alert('oiiiiiii'); 
        } 
       }; 

       $scope.$watch('ngHey', function(val) { 
        if (val) { 
         go(); 
        } 
       }); 
      } 
     }; 
    } 
]); 

注意,你怎麼能在這種情況下使用$scope.ngHey,不需要$eval屬性。

演示:。http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

+0

嗨,我想我固定所有,是的,你是適合我的,我用手錶,而不是觀察,然後用** $ scope取代$ parse。$ parent。$ eval(atr .ngHey)** – sbaaaang 2015-03-03 14:37:15

+0

如果您還想添加我的更改到您的答案我會接受,謝謝 – sbaaaang 2015-03-03 14:37:43

+0

哦,我忘了,而不是範圍:真正我添加*範圍:{ngHey:'='} * – sbaaaang 2015-03-03 14:39:08

1

JSFIDDLE DEMO

由於$timeout稍後設置x的值,因此檢查屬性的指令內部的條件總是返回false。因此,每當x更改時,請使用$watch檢查go()中的條件。

var myApp = angular.module('myApp',[]); 

myApp.directive('ngHey', function() { 
    return { 
     'restrict': 'A', 
     'scope': true, 
     'link': function($scope, el, attr) { 

     var go = function() { 
      if ($scope.$eval(attr.ngHey)) { 
       alert('oiiiiiii'); 
      } 
      }; 

     $scope.$watch('x', function (val) { 
      if (val) { 
      go(); 
      } 
     }); 
     } 
    }; 
    }); 

代替$parse使用$scope.$eval也同樣,而不是$observe使用$watch

+0

對不起,但我不能使用$ watch,範圍變量是動態/未知的,並不總是scope.x它可以是任何你想要/需要:) – sbaaaang 2015-03-03 13:11:07