在Angular 1.5中，如何从子组件编译父组件的html？

Question

我有两个 angular 组件：app-menuitem 和 app-menu。 app-menu 有一个 app-menuitem 作为子项的列表，但没有 transclude。

应用程序菜单项

angular.module('app')
    .component('appMenuitem', {
      transclude: false,
      controller: menuitemController,
      require: {
        parent: '^?app-menu'
      },
      bindings: {
        ...
        groupradio: '@',        
        isactive: '<', // bind to active (just init)
        ...
      },
      templateUrl: 'angular/components/simple/menuitem/menuitem.html'
    });

function menuitemController($rootScope, $scope, $element, $attrs) {
    var ctrl = this;

    //Default values
    ctrl.$onInit  = function () {
      if(ctrl.isactive){
        ctrl.active = true;
      }else{
        ctrl.active = false;
      }
      ctrl.selectRadioItem = function(){
          if(!ctrl.active){
             var currentMenu = this.parent.items.menu;
             var levelMenu = this.parent.items.level;
             for(var i = 0; i < currentMenu.length; i++){
                var currentMenuItem = currentMenu[i];
                if(currentMenuItem.groupradio === ctrl.groupradio){
                    if(currentMenuItem.index === ctrl.index){
                        currentMenuItem.isactive = true;
                    }else{
                        currentMenuItem.isactive = false;
                    }
                    currentMenu[i] = currentMenuItem;
                }
            }
            this.parent.items.menu = currentMenu;
            console.dir(this.parent); //<-- updates are visible but the html did not change. 
          }
          ...

正如您在代码末尾看到的那样，我设法从该子组件 app-menuitem 修改了父组件 app-menu，但是在这种情况下 HTML 再也不会被编译.有人有想法吗？

Answer 1

我建议不要直接从子项更改父项的值。相反，在父控制器上公开一个方法，该方法从具有所需更新的子控制器调用，并让父控制器处理更新。这使您既可以避免成本更高的绑定，又可以将控制器属性的控制权保留在控制器本身中（从而使您可以更轻松地在代码中找到错误源）。如果您正在测试您的代码，它也更易于测试。

Small Tip: For test purposes, if something doesn't update after you update the model, you could always try to do $scope.$apply() after the update and see if there's a $digest timing issue. Do not use in production unless you have to - it is costly and can easily cause run time exceptions

在Angular 1.5中，如何从子组件编译父组件的html？

In Angular 1.5, how to compile the html of a parent component from a child component?

components

compilation

parent-child

angularjs

angular