AngularJS - 外部模板答案

【问题标题】：AngularJS - external templateAngularJS - 外部模板
【发布时间】：2013-10-27 18:00:33
【问题描述】：

我正在为每个内容做一个模板，因为我有很多数据要显示，但都在相同的结构中。

这里是 index.html

<div ng-model="methods" 
 ng-include="'templateMethod.html'" 
 ng-repeat = "method in methods">

这里是 script.js：

function Ctrl($scope) {
$scope.methods =
[ { name: 'method1',
    description: 'bla bla bla',
    benefits: 'benefits of method1',
    bestPractices : 'bestPractices',
    example: 'example'},

 { name: 'method2',
    description: 'bla bla bla',
    benefits: 'benefits of method2',
    bestPractices : 'bestPractices',
    example: 'example'} ];
}

这里是templateMethod.html：

<table>
 <tr>
   <td>
     <div ng-show="toShow=='{{method.name}}Field'">
     <h3>{{mmethodethod.name}}</h3>
     <p>    
       <strong>Description</strong>
       {{method.description}}
     </p>
     <p>    
       <strong>Benefits</strong>
       {{method.benefits}}
     </p>
     <p>
       <strong>Best practices</strong>
       {{method.bestPractices}}
     </p>
      <p>   
        <strong>Examples</strong>
        {{method.example}}
      </p>
    </div>
    </td>
    <td class = "sidebar">
      <ul>
         <li><a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>   
      </ul>             
    </td>
  </tr>
</table>

有效！但是：如果我点击第一个按钮然后第二个，第一个按钮的内容不会消失，它会出现在第一个按钮的内容下面...... 重复有问题吗？

谢谢

【问题讨论】：

试试ng-click="$parent.toShow='{{method.name}}Field'" ... plunker 或 jsfiddle 中的现场演示总是有帮助的。描述不是 100% 清楚是什么问题

标签： javascript html angularjs

【解决方案1】：

ng-repeat 的每个元素都有自己的范围，继承自外部（控制器）范围。

您应该将要显示的对象存储在控制器范围的对象中。例如：methods

<div ng-show="methods.toShow=='{{method.name}}Field'">
...
<a ng-click="methods.toShow='{{method.name}}Field'"

【讨论】：

【解决方案2】：

基本上 JB Nizet 所说的，这是一个有效的plunker。问题是 ng-include 和 ng-repeat 创建了它们自己的作用域。子作用域对其父作用域的属性具有只读访问权限，因此您需要一个额外的对象引用来获得作用域之间的读写访问权限。

Javascript：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.state = { toShow: false };
  $scope.methods = [{
      name: 'method1',
      description: 'bla bla bla',
      benefits: 'benefits of method1',
      bestPractices: 'bestPractices',
      example: 'example'
    },

    {
      name: 'method2',
      description: 'bla bla bla',
      benefits: 'benefits of method2',
      bestPractices: 'bestPractices',
      example: 'example'
    }
  ];
});

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script src="app.js"></script>
    <script type="text/ng-template" id="templateMethod.html">
      <table>
       <tr>
         <td>
           <div ng-show="state.toShow == '{{method.name}}Field'">
           <h3>{{mmethodethod.name}}</h3>
           <p>    
             <strong>Description</strong>
             {{method.description}}
           </p>
           <p>    
             <strong>Benefits</strong>
             {{method.benefits}}
           </p>
           <p>
             <strong>Best practices</strong>
             {{method.bestPractices}}
           </p>
            <p>   
              <strong>Examples</strong>
              {{method.example}}
            </p>
          </div>
          </td>
          <td class = "sidebar">
            <ul>
               <li><a ng-click="state.toShow = '{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>   
            </ul>             
          </td>
        </tr>
      </table>
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-model="methods" 
 ng-include="'templateMethod.html'" 
 ng-repeat = "method in methods">
  </body>

</html>

【讨论】：

【解决方案3】：

这个问题实际上与每个 ng-repeat Angular 创建一个新范围有关，因此您需要在父范围中有一些东西，即：一个控制器，您可以使用它来引用每个方法的可见状态，类似这样：

http://jsfiddle.net/strokov/FEgK3/1/

基本上我将 ng-show 设置为方法对象的属性：

 <div ng-show="method.show">

在 click 方法上，我在 Scope 上调用了一个名为 show(method) 的函数，该函数将负责在所有方法上设置 method.show 属性，所以基本上我们都被隐藏了，然后显示被点击的那个这个：

$scope.show = function(method) {
    angular.forEach($scope.methods, function(method){
       method.show = 0;
    });
    method.show = 1;
};

您会注意到，使用这种 css 样式如何查看 HTML 中表示的每个不同的角度范围：

.ng-scope { 边框：1px 红色虚线；边距：5px； }

【讨论】：

谢谢大家，现在可以了！我只是简单地补充一下 Nizet 所说的话，但谢谢大家 :-)