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

Question

我有两个角度分量：app-menuitem 和 app-menu。 app-menu 有一个作为子项的 app-menuitem 列表，但没有嵌入。

应用菜单项

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

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

小提示：出于测试目的，如果某些内容在您之后没有更新 更新模型，你总是可以尝试在 $scope.$apply() 之后 更新并查看是否存在$digest 时间问题。 请勿用于 生产，除非你必须 - 它很昂贵并且很容易导致运行 时间异常