Задачи определения наследования углового контроллера

Question

Цель состоит в том, чтобы иметь две разные директивы, которые являются функциональными функциями совместного использования братьев и сестер. Я либо буду использовать один , либо другой, ни один внутри другой.

Однако вторая директива будет иметь все возможности первой с небольшими дополнениями. Из-за этого мне хотелось бы, чтобы функциональность наследовала из директивы «Родитель» на «Ребенок».

Я достигаю этого путем повторного использования одного и того же объекта определения директивы из родителя на ребенка, за исключением полей контроллера/шаблона.

Все это хорошо работало, пока я не ударил наблюдателей с моего ParentDirCtrl. По какой-то причине наблюдатель, кажется, настроен правильно, наблюдая mydir.obj1, и все же как-то внутри функции обратного вызова наблюдателя mydir.obj1 становится неопределенным.

Я кой-что о _.extend/$controller меняется, как в $scope сек работы так mydir.obj1 не определена в ParentDirCtrl предположения, но я не знаю, почему это было бы дело.

Plunk

angular.module('plunker', []) 

// lodash 
.constant('_', _) 

.controller('MainCtrl', function($scope, $timeout) { 
    $scope.obj = { 
    name: 'John', 
    age: 30, 
    }; 
}) 


.controller('ParentDirCtrl', function($scope) { 
    var mydir = this; 

    mydir.doStuffInParent = function() { 
    alert('executed from the parent directive'); 
    } 

    $scope.$watch('mydir.obj1', function() { 
    // ==================================== 
    //    ERROR 
    // Why is 'mydir.obj1' undefined when 
    // occupation is set? 
    // ==================================== 
    mydir.obj1.occupation = 'Meteorologist'; 
    }); 
}) 


.directive('parentDirective', parentDirective) 


.directive('childDirective', function() { 
    // borrow the directive definition object from the parent directive 
    var parentDDO = parentDirective(); 

    // uodate the template and controller for our new directive 
    parentDDO.template = [ 
    '<div>', 
     '<p ng-click="mydir.doStuffInParent()">{{mydir.obj1.name}}</p>', 
     '<p ng-click="mydir.doStuffInChild()">{{mydir.obj1.age}}</p>', 
    '</div>' 
    ].join(''); 

    parentDDO.controller = function($scope, $controller, _) { 
     // extend 'this' with the Parent's controller 
     var mydir = _.extend(this, $controller('ParentDirCtrl', { $scope: $scope })); 

     mydir.doStuffInChild = function() { 
     alert("executed from the child directive"); 
     }; 
    }; 

    return parentDDO; 
}); 


// this will be moved to the top during declaration hoisting 
function parentDirective() { 
    return { 
    restrict:'E', 
    scope: {}, 
    bindToController: { 
     obj1: '=', 
    }, 
    template: '<div>{{mydir.obj1}}</div>', 
    controller: 'ParentDirCtrl', 
    controllerAs: 'mydir', 
    }; 
} 

Answer 1

obj1 заполняется на экземпляр контроллера ребенок - вот почему mydir.obj1 не определено в родительском следящего. Вы можете получить доступ к obj1 непосредственно через сферу или с помощью ссылки переходила в наблюдателе:

$scope.$watch('mydir.obj1', function(val) { 
    $scope.mydir.obj1.occupation = 'Meteorologist'; 
    // or 
    val.occupation = 'Meteorologis'; 
}); 

Там нет возможности наследования здесь - оба контроллера работают на одной и той же области. Синтаксис Controller-AS - это то, что вас смущает - я бы избавился от него, чтобы сделать все понятнее.