Javascript 在Angular中创建可重用面板（ctrl&；view tpl）的最佳实践是什么？
我是angularjs新手，所以可能我遗漏了一些东西，但我找不到一个好方法来创建可重用视图，我可以在父视图中实例化（因为没有更好的词） 我的用例是一个web应用程序，其中我有一个主视图页面，然后在同一页面上有许多子面板，这些子面板基于相同的控件和视图模板显示相似的内容，但只是具有不同的配置选项。（例如：带有stackoverflow问题摘要的小面板，但每个面板都配置为获取不同问题id的详细信息） 我有一个JSFIDLE在这里工作： 我需要的是关于两件事的反馈：Javascript 在Angular中创建可重用面板（ctrl&；view tpl）的最佳实践是什么？,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,我是angularjs新手，所以可能我遗漏了一些东西，但我找不到一个好方法来创建可重用视图，我可以在父视图中实例化（因为没有更好的词） 我的用例是一个web应用程序，其中我有一个主视图页面，然后在同一页面上有许多子面板，这些子面板基于相同的控件和视图模板显示相似的内容，但只是具有不同的配置选项。（例如：带有stackoverflow问题摘要的小面板，但每个面板都配置为获取不同问题id的详细信息） 我有一个JSFIDLE在这里工作： 我需要的是关于两件事的反馈： 如何最好地将初始化参数传递给子面
- 如何最好地将初始化参数传递给子面板控制器
- 如果有更好的方法
<!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>
使用该模板创建一个指令，并使用属性作为设置字段。方法很好。此外，在ng init中，始终尝试传递对象，而不是字符串、整数等，因为会创建子作用域，并且对值的更改不会反映在父作用域中 我已经在angular应用程序上工作了大约两个月了，所以我绝不是一个angular专家，但是在谷歌上搜索了很多晚上之后，我大致是这样做的。angular中最重要的一点是作用域，以及隔离作用域的能力，这样模板和父页面就不会意外地相互践踏 父控制器：
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'
}
}
这里有一个很棒的1小时，强烈推荐，值得花时间，甚至可以进入花式的转述。这很有道理。谢谢您的回复。我基于此更新了JSFIDLE，并有一个新的（）非常接近于工作。它允许在使用属性时传递设置，但由于某些原因，它在ng repeat中不起作用。“你看到什么看起来不对劲的地方了吗？”艾伦刚才才看到。您不需要在那里安装其他控制器，指令本身提供了可以使用的链接。设置中的“@”选项意味着它将首先计算传入的内容，然后将结果作为范围变量。这是“单向的”。我已经更新了小提琴，请告诉我这是否是您想要的： <div ng-reusable-template="" directive-data="dataPassDown"></div>