另一个指令模板中的指令:如何使其执行?

时间:2014-09-22 16:06:21

标签: angularjs angularjs-directive ng-grid

我试图在我的自定义指令模板中声明一个指令。请注意,所需的指令应使用我的指令范围中的字段:

angular.module('core.directives')
 .directive('containertable', function () { 
    /**
     * Startup function for directive
     */
    function link(scope, element, attr) {
          // ...init of scope.childgridoptions object skipped...
    }

    return {
        link: link,
        restrict: 'E',
        scope: { data: '='},
        template: "<ng-grid='childgridoptions'></ng-grid>"
    };
}

看起来,当我的指令被调用时,ng-grid指令不会被执行,尽管事实上我在页面源中看到了模板。也许它需要编译或什么?

1 个答案:

答案 0 :(得分:1)

这是PLUNK 以及基于您的示例的指令的工作示例

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.gridOptions = { data: 'data' };
  $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
});

app.directive('mygrid',function(){
  var link = function(scope, element, attrs) {
  }
  return {
    link: link,
    restrict: 'E',
    scope: { 
      data: '=',
      gridoptions: '='
    },
    template: '<div class="gridStyle" ng-grid="gridoptions"></div>'    
  }
});