Question

指令

function CreateTable() {
    var directive = {
        restrict: 'E',
        scope: {
            pageName: '=',
        },
        templateUrl: 'Hexdra/partials' + pageName + '-table.html',
    };
    return directive;
};

模板Html

  <table ng- controller="TableController as TblCtrl">
    <tr ng-repeat-start="data in TblCtrl.table" ng-if="$first">
     <th>{{::data.col1}}</th>
     <th>{{::data.col2}}</th>
    </tr>
    <tr ng-repeat-end>
    <td>{{data.col1}}</td>
    <td><input disabled type="checkbox" ng-checked="data.col2" ng- model="checkbox"/></td>
    </tr>
  </table>

Html

<site-table pageName="goals" class="span6"></site-table>

当我开始为我的网站制作表格时，我发现自己为网站周围的每个表制作了一个新的指令，即使这只有4个单独的指令，我知道必须有一种方法来制定一个通用指令然后我可以添加一些东西，使指令加载一个唯一的templateUrl和一个唯一的JSON文件，该文件用于使用每个表独有的数据填充表。

我去了looking并发现您可以在html中create your own attributes，如上面的Html部分所示。在这种情况下，我添加了一个新属性pageName。在示例中，它是"goals"。我试图让我的<site-table>指令将该属性分配到指令的范围，然后它将完成并评估templateUrl为Hexdra/partials/goals-table.html

目前虽然我在控制台中留下了一个空白页面并且pageName is undefined出错。

我觉得我错过了在调用指令和完成指令之间发生的非常重要的事情。也许这是进入ng-Route的好时机？

感谢您寻找：）

Answer 1

您可以通过两种方式实现这一目标：

templateUrl和ng-include in template。

应用：

var app = angular.module('plunker', []);

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

});


app.directive("commondir1", function() {
  return {
    restrict: "E",
    scope: true,
    templateUrl: function (element, attr) {
      return 'Hexdra/partials' + attr.pageName + '-table.html';
    },
    link: function(scope, iElement, iAttrs, controller) {

    }
  };
});

app.directive('commondir2', function() {
  return {
    restrict: 'E',
    scope: {
      pageName : '@'
    },
    template: '<ng-include src="pageName"></ng-include>'
  };
});

演示：http://plnkr.co/edit/IXetkYMHCxsgAsyqA3SM

为指令指定自定义属性。

指令

模板Html

Html

1 个答案: