如何控制指令的调用

在这个 plnkr 中：https://plnkr.co/edit/F0XsOPZKq5HArFo9vtFs?p=preview

我试图阻止使用 ng-show 调用自定义指令。但是，如果在调用指令 4 次时检查控制台输出：console.log('invoked') 但是 ng-show 显示/隐藏 html 元素，它不控制自定义指令本身中呈现的内容。

是否有一种机制可以将ng-show传递给自定义指令，如果它是假的，那么调用该指令？我认为可以将一个新变量传递给包含与 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

而不是

ng-show您应该使用ng-if指令来避免显示前的指令链接

分叉式弹道示例

相关内容

最新更新

热门标签：