Angular创建可重用面板（ctrl＆view tpl）的最佳实践是什么？

我是新来angularjs，所以也许我失去了一些东西，但我不能找到一个很好的方法来创建一个父视图，我可以实例（由于缺乏一个更好的词），可重复使用的意见。Angular创建可重用面板（ctrl＆view tpl）的最佳实践是什么？

我的用例是一个网页应用程序，我有一个主视图页面，然后在同一页面上有许多子面板，它们基于相同的控件和视图模板显示类似的内容，但只是具有不同的配置选项。（例如：小板与计算器的问题，但其中，每个板构造为拉制细节不同的问题ID摘要）

我有一个的jsfiddle在这里工作：http://jsfiddle.net/abierbaum/Agbdz/

我所寻找的是关于两个反馈东西：

如何最好地将初始化参数传递到子面板控制器？
如果有更好的方法来做到这一点。

下面是代码

<!DOCTYPE html> 
<div ng-app="app"> 
<div ng-init="names=['Jim','Spock','Jean Luc', 'Data', 'Riker']"> 
    <h1>Non-looping instances</h1> 
    <br/><h1>First One</h1> 
    <div ng-include="'panel.tpl.html'" 
      ng-init="name = 'Bob'" 
    ></div>  

    <br/><h1>Second One</h1> 
    <!-- Is this the best/only way to pass parameter to sub-panel? --> 
    <div ng-include="'panel.tpl.html'" 
      ng-init="name = 'Pete'" 
      ></div>  

    <h1>Looping Forms</h1> 
    <!-- This is going to create a bunch of extra scopes: repeat & include --> 
    <div ng-repeat="name in names"> 
     <div ng-include="'panel.tpl.html'"/> 
    </div>  
</div> 

<script type="text/ng-template" id="panel.tpl.html"> 
    <div class="panel" ng-controller='PanelCtrl as ctrl'> 
     <br/> 
    <input type='text' ng-model='ctrl.name' /> 
    <p>Current: {{ctrl.name}}</p> 
     <button ng-click="ctrl.sayHi()">speak</button> 
    </div> 
</script> 

</div>

而且控制文件的核心是这样的：

angular.module('app', []) 
.controller('PanelCtrl', function($scope) { 
    this.name = $scope.name || 'Jack'; 

    this.sayHi = function() { 
     console.log('Hi, I am ' + this.name); 
    } 
});

来源

2013-09-01 Allen

创建该模板指令和使用属性为设置字段。

来源

2013-09-01 20:17:48

的方法是罚款。在ng-init中，也总是尝试传递一个对象而不是字符串，整数等，因为子范围被创建，并且对该值的更改不会反映在父范围中。

来源

2013-09-02 03:58:34 Chandermani

我一直在工作的角度应用了约两个月了，所以我绝不是一个角度的专家，但在谷歌搜索的许多个夜晚之后，这是我大概是怎么做的。关键之处在于角度最重要的事情之一就是范围，以及隔离范围的能力，以便模板和父页面不会意外地相互踩踏。

父控制器：

var myModule = angular.module('app', []) 
.controller('PanelCtrl', function($scope) { 
    $scope.dataPassDown = { 
     dataItem: 'some variable', 
     dataPackage: {name: 'name', age: '20'}, 
     someFunction: function(){ console.log('hello world');} 
    } 
});

创建您的指令。

myModule.directive('reusableTemplate', function factory(){ 
    return { 
     scope: {directiveData: '='}, // creates isolate scope and two way data binding 
     link: function(scope, element, attrs){ 
      //your link function here 
      if (directiveData.dataItem == 'some variable'){ 
       //do something based on variable passed in by parent. 
      } 
     }, 
     templateUrl: 'yourReuseableTemplateUrl.html' 
    } 
}

现在，在您angluar页/ HTML，调用指令：

 
     <div ng-reusable-template="" directive-data="dataPassDown"></div>

有一个伟大的1小时youtube video on directives，极力推荐，值得的时间，甚至进入花哨transclusion东西。它使得angular directive documentation有意义。

来源

2013-09-02 21:59:27 wynnwu

感谢您的答复。我更新了基于此的jsfiddle并且具有非常接近的工作一个新的（http://jsfiddle.net/abierbaum/cVeSf/）。它允许在使用属性时传递设置，但由于某种原因，它不适用于ng-repeat。你看到任何看起来错误的东西吗？ – Allen

@艾伦直到现在才看到这一点。你不需要在那里有另一个控制器，指令本身提供了可以使用的链接。设置中的“@”选项意味着它将首先评估传入的内容，然后将结果作为范围变量。这是'单向'。我已经更新了小提琴，让我知道，如果这是你在找什么：[查看更新的小提琴（http://jsfiddle.net/cVeSf/10/） – wynnwu

Angular创建可重用面板（ctrl＆view tpl）的最佳实践是什么？

回答

相关问题