包含特定div的模板

我想加載特定div標籤的腳本模板。在我的演示中，我有3'show'鏈接。如果我點擊任何一個show鏈接，它會爲所有'show'鏈接加載腳本。但我只想加載我點擊過的'show'鏈接的腳本。包含特定div的模板

請參閱PLUNKER。

(function(angular) { 
 
    'use strict'; 
 
angular.module('docsTemplateUrlDirective', []) 
 
    .controller('Controller', ['$scope', '$compile', function($scope, $compile) { 
 
    
 
    $scope.showdiv = function(){ 
 
     $scope.templateURL = 'my-tmpl'; 
 
    
 
    }; 
 
    }]); 
 
})(window.angular);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Example - example-example12-production</title> 
 
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="docsTemplateUrlDirective" data-ng-init="names=['1','2','3']"> 
 
    <div ng-controller="Controller"> 
 
     <script type="text/ng-template" id="my-tmpl"> 
 
     <p>Hello</p> 
 
     </script> 
 
     <div data-ng-repeat="x in names"> 
 
     <a href="#" ng-click="showdiv()">show</a> 
 
     <div id="d"> 
 
     
 
     <div ng-include=templateURL></div> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2015-12-15 user3386779

使用不同的模板 – azad

@AZZi如何使用不同的模板 – user3386779

檢查我的怒吼都給出了兩個答案都在不同的方法。 –

如果你需要證明同樣的事情，意味着需要使用相同的模板，然後使用下面的代碼。

這裏我定義了一個新的範圍變量。看看更新的plunker

(function(angular) { 
 
    'use strict'; 
 
angular.module('docsTemplateUrlDirective', []) 
 
    .controller('Controller', ['$scope', '$compile', function($scope, $compile) { 
 
    
 
    $scope.a = 0; //Here 
 
    $scope.showdiv = function(x){ 
 
     $scope.templateURL = 'my-tmpl'; 
 
     $scope.a = x; //and Here 
 
    }; 
 
    }]); 
 
})(window.angular);

<a href="#" ng-click="showdiv(x)">show</a> <!-- pass x to remember --> 
 
<div id="d" ng-show="a==x"> <!--and check that new variable set as x or not --> 
 
    <div ng-include="templateURL"></div> 
 
    </div>

來源

2015-12-15 05:33:40

如何使用不同的模板 – user3386779

如果您需要使用不同的模板，不同的鏈路然後，你可以使用下面的代碼。這是plunker。

(function(angular) { 
 
    'use strict'; 
 
angular.module('docsTemplateUrlDirective', []) 
 
    .controller('Controller', ['$scope', '$compile', function($scope, $compile) { 
 
    
 
    $scope.names=[{name:'1', template:'tmpl-1', show:false}, 
 
        {name:'2', template:'tmpl-2', show:false}, 
 
        {name:'3', template:'tmpl-3', show:false}] 
 
    $scope.show = '0'; 
 
    $scope.showdiv = function(x){ 
 
     $scope.show = x.name; 
 
    }; 
 
    }]); 
 
})(window.angular);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Example - example-example12-production</title> 
 
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="docsTemplateUrlDirective"> 
 
    <div ng-controller="Controller"> 
 
     <script type="text/ng-template" id="tmpl-1"> 
 
     <p>Template 1</p> 
 
     </script> 
 
     <script type="text/ng-template" id="tmpl-2"> 
 
     <p>Template 2</p> 
 
     </script> 
 
     <script type="text/ng-template" id="tmpl-3"> 
 
     <p>Template 3</p> 
 
     </script> 
 
     <div data-ng-repeat="x in names"> 
 
     <a href="#" ng-click="showdiv(x)">show</a> 
 
     <div id="d" ng-show="show == x.name"> 
 
     <div ng-include="x.template"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2015-12-15 05:54:42

看一看下面的代碼。

(function(angular) { 
 
    'use strict'; 
 
    angular.module('docsTemplateUrlDirective', []) 
 
    .controller('Controller', ['$scope', '$compile', 
 
     function($scope, $compile) { 
 
     $scope.names = [{ 
 
      'name': '1', 
 
      'tmpl': 'my-tmpl1' 
 
     }, { 
 
      'name': '2', 
 
      'tmpl': 'my-tmpl2' 
 
     }, { 
 
      'name': '3', 
 
      'tmpl': 'my-tmpl3' 
 
     }]; 
 
     $scope.showdiv = function(tmpl) { 
 
      $scope.templateURL = tmpl; 
 

 
     }; 
 
     } 
 
    ]); 
 
})(window.angular);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Example - example-example12-production</title> 
 
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="docsTemplateUrlDirective"> 
 
    <div ng-controller="Controller"> 
 
    <script type="text/ng-template" id="my-tmpl1"> 
 
     <p>Hello1</p> 
 
    </script> 
 
    <script type="text/ng-template" id="my-tmpl2"> 
 
     <p>Hello2</p> 
 
    </script> 
 
    <script type="text/ng-template" id="my-tmpl3"> 
 
     <p>Hello3</p> 
 
    </script> 
 
    <div data-ng-repeat="x in names"> 
 
     <a href="#" ng-click="showdiv(my-tmpl); x.isOpen = !x.isOpen;">show</a> 
 
     <div id="d" ng-show="x.isOpen"> 
 

 
     <div ng-include="x.tmpl"></div> 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

demo

來源

2015-12-15 05:54:52 Jackie

包含特定div的模板

回答

相關問題