Я хочу загрузить шаблон скрипта для конкретного тега div. В моей демоверсии у меня есть 3 ссылки «показать». Если я щелкаю по какой-либо из ссылок на шоу, он загружает скрипт для всех ссылок на шоу. Но я хочу загрузить только сценарий для той ссылки «показать», по которой я щелкнул.

Смотрите 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="jquery@2.1.1" 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>
1
user3386779 15 Дек 2015 в 08:26

3 ответа

Лучший ответ

Если вам нужно показать одни и те же вещи, значит, нужно использовать один и тот же шаблон, а затем используйте следующий код.

Здесь я определил новую переменную области видимости. Посмотрите на обновленный плункер

(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>
1
Partha Sarathi Ghosh 15 Дек 2015 в 05:40

Если вам нужно использовать другой шаблон для другой ссылки Тогда вы можете использовать следующий код. Вот плунжер.

(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="jquery@2.1.1" 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>
0
Partha Sarathi Ghosh 15 Дек 2015 в 05:54

Взгляните на код ниже.

(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="jquery@2.1.1" 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>

демо

0
Jackie 15 Дек 2015 в 05:54