Question

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

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

是否有一种机制可以将ng-show传递给自定义指令，如果它是假的，那么请调用该指令吗？我认为可以将一个新变量传递给包含与ng-show相同值的指令，然后将该指令的主体包装在条件中？

src：

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

Answer 1

您应该使用ng-show指令来避免在show

之前进行指令链接，而不是ng-if

Forked plunker example

如何控制指令的调用

1 个答案: