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修改了父组件应用程序菜单，但在这种情况下，HTML永远不会再次编译。有人有想法吗？

Answer 1

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

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

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

1 个答案: