2016-02-13 69 views
1

的調用在這個plnkr: https://plnkr.co/edit/F0XsOPZKq5HArFo9vtFs?p=preview如何控制指令

我試圖阻止自定義指令通過使用NG-顯示被調用。但是,如果在指令被調用4次時檢查控制檯輸出:console.log('invoked')但是ng-show顯示/隱藏html元素,它不控制在自定義指令本身內呈現的內容。

是否有一種機制將ng-show傳遞給自定義指令,如果它是false,那麼請調用該指令?我認爲可以傳遞一個新的變量,該變量包含與ng-show相同的值,然後在條件中包裝該指令的主體?

源:

goob.html : 
goob 

http-hello2.html: 
2. http-hello2.html 

index.html : 
<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
    <body> 

    <div ng-controller="FetchCtrl"> 

<label>Filter: <input ng-model="search"></label> 

<div ng-show="false"> 
<div ng-repeat="sourceUrl in sourceUrls | filter:search track by $index "> 
    <status-viewer url="sourceUrl"> </status-viewer> 
</div> 
    </div> 
</div> 

</body> 
</html> 

mytemplate.html : 
<!--<h1>{{url}}</h1>--> 
<div> 
    <p>{{model}}</p> 

</div> 

script.js : 
var myapp = angular.module('app', []).controller('FetchCtrl', FetchCtrl) 

myapp.directive('statusViewer', function ($http , $interval) { 
      return { 
       restrict: 'E', 
       templateUrl: 'mytemplate.html', 
       scope: { 
        url: '=' 
       }, 
       link: function (scope, elem, attrs, ctrl) { 

        console.log('invoked') 


        scope.isFinishedLoading = false; 

        $http.get(scope.url).success(function (data) { 
         scope.model = data; 
        }); 
       } 
      }; 
     }); 

function FetchCtrl($scope, $http, $q , $parse) { 


$scope.sourceUrls = [ 
       'http-hello2.html' 
      ,'http-hello2.html' 
      ,'test.html' 
      ,'goob.html']; 



} 

test.html : 
test 

回答