Question

我想加载特定div标签的脚本模板。在我的演示中，我有3＆＃39; show＆＃39;链接。如果我点击任何一个show链接，它会为所有人加载脚本＆＃39; show＆＃39;链接。但我想只加载脚本，以显示＆＃39; show＆＃39;我点击过的链接。

请参阅PLUNKER。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

如果您需要显示相同的内容，则表示需要使用相同的模板使用以下代码。

这里我定义了一个新的范围变量。查看更新后的plunker

＆＃13;

(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);

＆＃13;

 <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>

＆＃13;

Answer 2

如果您需要为不同的链接使用不同的模板然后你可以使用以下代码。这是plunker。

＆＃13;

<!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>

＆＃13;

<servlet>
  <servlet-name>DefaultServlet</servlet-name>
  <servlet-class>org.eclipse.jetty.servlet.DefaultServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>DefaultServlet</servlet-name>
  <url-pattern>/css/*</url-pattern>
</servlet-mapping>

＆＃13;

Answer 3

看看下面的代码。

＆＃13;

<!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>

＆＃13;

num = 477.097
strnum = str(int(num)) + str(num).split(".")[1][:2]

＆＃13;

demo

将模板包含在特定div

3 个答案: