angular如何动态设置指令/模板内的属性?

时间:2014-05-04 21:14:15

标签: javascript angularjs angularjs-directive angularjs-scope angular-ui-bootstrap

刚开始玩Angular。我有几种模态。与页眉和页脚相同的结构。主要部分是一棵树。我有三种不同树的数据。

我正在使用angular ui。和abn tree

<script type="text/ng-template" id="my-template.html">
        <div class="modal-header">
            <h3 class="modal-title">Select your option</h3>
        </div>
        <div class="modal-body">
            <abn-tree tree-data="{{treeData}}"                          
                      icon-leaf="glyphicon glyphicon-stats"
                      on-select="treeClickHandler(branch)"
                      expand-level="1"
                      initial-selection="Select Subject">
            </abn-tree>        
        </div>            
    </script>

在我的HTML中。我有多个地方,我使用这个

<my-modal data-treeDataSource="tree1"></my-modal>
<my-modal data-treeDataSource="tree2"></my-modal>
<my-modal data-treeDataSource="tree3"></my-modal>

在我的app.js

app = angular.module('myApp', deps).directive('myModal', function() {
  return {
    restrict: 'E',      
    templateUrl: 'my-template.html'
  };
});;

app.controller('myController', function($scope) {


    //set treeData for the first modal and second modal, etc.  
    Sscope.tree1 = tree1Data1;
    Sscope.tree2 = tree1Data2;
    Sscope.tree3 = tree1Data3;



});

在我的控制器中,我只是设置树数据。我需要三个具有不同树数据源的模态。我可以用不同的数据属性编写三个不同的模板。我的问题是

  1. 区分不同指令的最佳方法是什么?通过数据或身份或其他方式
  2. 在我的模型中设置“树数据”的最佳方法是什么。在指令绑定时我没有实际数据。我有控制器内的数据。
  3. 感谢您阅读问题的时间。

0 个答案:

没有答案