0

我是 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);
    }
});
4

3 回答 3

1

我已经在 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'
    }
}

现在在您的角度页面/ html中，调用指令： 

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

有一个很棒的 1 小时youtube 视频关于指令，强烈推荐，值得花时间，甚至进入花哨的嵌入内容。它使角度指令文档有意义。

于 2013-09-02T21:59:27.213 回答
0

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

于 2013-09-02T03:58:34.680 回答
0

使用该模板创建指令并将属性用作设置字段。

于 2013-09-01T20:17:48.460 回答