угловая 1,5 компоненты не будет вызывать $ onChanges при изменении

Question

Я имею угловую 1.5 компоненты внутри HTML-странице (не родительский компонент) и компонент не будет вызывать $ onChanges при изменении: здесь являются содержащим HTML: , . .

<my-comp standards-data="standardsData"></my-comp> 

. . .

здесь компонент:

angular.module("bla").component('myComp', { 
    templateUrl: '/my-comp.tpl.html', 
    controller: myController, 
    bindings: { 
     standardsData: '<' 
    } 
}); 

function myController() { 
    var self = this; 

    self.$onInit = function() { 
     self.standardsData = {}; 
    } 

    self.$onChanges = function (changes) { 
     self.standardsData.something = changes.standardsData.currentValue.something; 
    }; 
} 

Когда я получать новые данные в Ctrl в HTML, который содержит мой компонент, он не будет влиять на компонент. Я получаю только в $ onInit компонента и после изменения $ scope.standardsData (в содержащем html/ctrl), $ OnChanges моего компонента не будет вызываться.

Надеюсь, я описал проблему правильно, Спасибо!

Answer 1

Связывание вашего компонента с standardsData является привязкой к ссылке на объект, которая не изменяется даже при изменении одного из ее свойств. В результате $onChanges не запускается. Это связано с тем, что $onChanges использует мелкие $watch.

Другими словами, $onChanges срабатывает только если мы будем использовать примитивы (т.е. не объекты) или изменить ссылку из объектов JavaScript, связанного в компонент

Итак, вам нужно либо: 1) Привяжите вручную свойства, которые вы хотите, а не ссылку на объект, или 2) Измените весь объект standardsData при изменении его данных. Вы также можете 3) Переписать $onChanges функциональность, я полагаю (не рекомендуется).

Вариант 1: Привязка только к свойству

Используйте если родительский контроллер/компонент просто изменяет свойство или свойства.

<my-comp standards-data-something="standardsData.something"></my-comp> 

и

bindings: { 
    standardsDataSomething: '<' 
} 

Вариант 2: Изменение опорного

Используйте если родительский контроллер/компонент получает совершенно новый standardsData. Вы сохраните свой текущий HTML для этой опции и установите:

standardsData = {newData}; //Reset the new data from http or wherever 

, чтобы изменить ссылку.

---

Некоторые дальнейшего чтения вы можете найти интересные:

http://blog.kwintenp.com/the-onchanges-lifecycle-hook/

http://www.codelord.net/2016/12/20/replacing-angulars-deep-watches-with-the-%24docheck-lifecycle-hook/