Question

我是angularjs的新手，所以也许我错过了一些东西，但我找不到一个好的方法来创建可以在父视图中实例化（因为没有更好的词）的可重用视图。

我的用例是一个Web应用程序，其中我有一个主视图页面，然后在同一页面上有许多子面板，这些子面板基于相同的控件和视图模板显示相似的内容，但只有不同的配置选项。（例如：包含stackoverflow问题摘要的小面板，但每个面板配置为提取不同问题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);
    }
});

Answer 1

我已经在一个角度应用程序上工作了大约两个月，所以我绝不是一位Angular专家，但经过在Google上搜索了很多夜之后，这里大概是我如何做到的。关键是，角度最大的事情之一是范围，以及隔离范围的能力，以便模板和父页面不会意外地相互踩踏。

家长控制器：

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 page / html中，调用指令：

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

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

Answer 2

使用该模板创建一个指令，并使用属性作为设置字段。

Answer 3

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

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

3 个答案: