Angular指令>動態控制器名稱>插值控制器名稱

我需要一些幫助來了解如何將控制器定義傳遞給嵌套在outer指令中的inner指令。請參閱http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan瞭解（不）工作示例。Angular指令>動態控制器名稱>插值控制器名稱

有沒有什麼辦法使角度插值在[email protected]上作爲item.ctrlName傳遞？
如何在inner指令中使用controllerAs語法？

來源

2015-11-19 grasnal

什麼是你想達到什麼目的？我看到你在指令中使用ctrl-name屬性，但是'inner'指令不在其作用域中定義的'ctrlName'。 –

@Miszy在這裏使用https://github.com/angular/angular.js/blob/a5ff651a59933c2c43b81642454ee458f98e1401/src/ng/compile.js#L2086。在我身邊，它通過'script.js @ 64 + 65'傳遞。 – grasnal

不，不是。你能告訴我哪個角度（？）完全使用'ctrlName'或'ctrl-name'嗎？我認爲這是一個典型的[XY問題]（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem）。如果你需要訪問父指令的控制器，你可以在內部指令中使用'require'字段。 –

我發現解決方案正在逐步取消（向上？）。我動態地構造整個指令配置對象，然後懶註冊它。

見http://plnkr.co/edit/pMsgop6u51zPLqkfWaWT

angular.module('app', ['moduleLazyLoader']) 

.controller('mainCtrl', ['$log', function ($log) { 
this.list = [ 
    { 
    name: 'asd', 
    ctrl: [ 
     'ItemAsdCtrl', 
     function() { 
     $log.debug('ItemAsdCtrl'); 
     } 
    ] 
    }, 
    { 
    name: 'xyz', 
    ctrl: [ 
     'ItemXyzCtrl', 
     function() { 
     $log.debug('ItemXyzCtrl'); 
     } 
    ] 
    } 
]; 
}]) 

.directive('outer', ['factoryLazyLoader', '$log', '$compile', function (factoryLazyLoader, $log, $compile) { 

function controller() {} 

return { 
    restrict: 'E', 
    controller: controller, 
    controllerAs: 'outer', 
    bindToController: true, 
    scope: { 
    list: '=list' 
    }, 
    link: function (scope, element, attributes) { 
    var directives = []; 

    scope.outer.list = scope.outer.list.map(function (ele, idx) { 

     var directiveSuffix = ele.ctrl[0]; 

     directiveSuffix[0].toUpperCase(); 

     var directiveName = 'item' + directiveSuffix, 
     directiveAttrName = directiveName.split(/(?=[A-Z])/).join("-").toLowerCase(); 

     directives.push(directiveAttrName); 

     factoryLazyLoader.registerDirective([ 
     directiveName, 
     function() { 
      return { 
      restrict: 'E', 
      replace: true, 
      controller: ele.ctrl[1], 
      controllerAs: ele.ctrl[0], 
      bindToController: true, 
      template: '<div>{{' + ele.ctrl[0] + ' | json}}</div>', 
      scope: { 
       item: '=item' 
      } 
      } 
     } 
     ]) 

     return ele; 
    }); 

    var tpl = '<div>'; 

    angular.forEach(directives, function (val, idx) { 
     tpl += '<' + val +' item="outer.list[' + idx + ']">' + '</' + val + '>'; 
    }); 

    tpl += '</div>' 

    // debugger; 

    element.replaceWith($compile(tpl)(scope)) 


    } 
}; 
}])

來源

2015-11-20 10:19:23 grasnal

1）如果你需要內部指令有父控制器，你可以在內部指令中使用require參數。像這樣的東西

angular.module('docsTabsExample', []) 
    .directive('outer', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     templateUrl: '...', // or template 
     controllerAs: 'outer', 
     bindToController: true, // This bind the scope with the controller object 
     controller: function(scope, element, attrs) { 
     } 
    } 
    }) 
    .directive('inner', function() { 
    return { 
     require: '^outer', 
     restrict: 'E', 
     transclude: true, 
     scope: { 
     title: '@' 
     }, 
     controllerAs: 'inner', 
     bindToController: true, // This bind the scope with the controller object 
     templateUrl: '...', // or template 
     controller: function(scope, element, attrs, tabsCtrl) { 
     // tabsCtrl and all the methods on the outer directive 
     }, 
    }; 
});

2）您已設置控制器：控制器和控制器是空的功能，但您可以設置有一個功能，像我以前一樣，並確保投入的bindToController：真正

來源

2015-11-19 14:48:34 Highercomve

thx爲您的答案。對於'1.'，我需要的是使用一些控制器而不是外部控制器作爲'inner'的精確控制器。使用'require：'我可以訪問'outer'指令控制器，但是如何告訴'inner'使用outerCtr.list [x] .ctrl作爲它自己的控制器？對於'2.'就像你說的那樣，如果使用'require：'，但不能使用'controller'：'@'，name：'ctrlName'，'combo。 – grasnal

啊，知道我更好。你將不同的控制器傳遞給每個內部指令？好的，如果是這樣的話，爲什麼你想這麼做？我想也許有另一種方法來解決這個問題，不是設置指令的控制器，而是創建類似api的東西。內部控制器有一些調用動態函數方法的方法。你知道我在說什麼嗎？ – Highercomve

Angular指令>動態控制器名稱>插值控制器名稱

回答

相關問題