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

Question

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

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网格指令似乎不会被执行，尽管我确实在页面源中看到了模板。也许它需要编译或其他什么？

Answer 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>'    
  }
});