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