javascript - AngularJS - problems with $onChanges -


i have object defined in parent component , passed in one-way binding first-child , second-child components. first-child component make changes in object. cannot understand why in second-child component $onchanges doesn't fire if object have changed something.

i have project build in snippet (link jsfiddle completeness)

angular.module('test', [])  .component('parent', {    template: "<first-child bind='vm.obj'></first-child>\               <second-child bind='vm.obj'></second-child>\  	    ",    controller: function(){      this.obj = {value: 0};      this.$oninit = function(){}     },    controlleras: 'vm',    bindings: {}  })  .component('firstchild', {    template: "<button ng-click='vm.plus()'>+</button>\               <button ng-click='vm.minus()'>-</button>\              ",   controller: function(){            this.plus = function(){      	this.bind.value++;      }            this.minus = function(){      	this.bind.value--;      }  		      this.$oninit = function(){}  		      this.$onchanges = function(obj){    		console.log('first-child changed one-way bindings', obj)      }    },    controlleras: 'vm',    bindings: {    	bind: '<'    }  })  .component('secondchild', {    template: "<p>{{vm.bind.value}}</p>",    controller: function(){  		this.$oninit = function(){}  		this.$onchanges = function(obj){  			console.log('second-child changed one-way bindings', obj)  		}    },    controlleras: 'vm',    bindings: {      bind: '<'    }  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <body ng-app="test">    <parent></parent>  </body>

so question is, there way fire $onchanges in situation?

edit

$onchanges doesn't fire if define array in parent, pass first-child , second-child in one-way binding , in first-child push something. in case object has changed, still don't undertand why.

you have little misunderstanding in one-way usage. one-way triggers $onchanges if object changes, not if property of object changes.

you must bind directly value in second-child, not full object.

here solution problem :

angular.module('test', []) .component('parent', {   template: "   <first-child bind='vm.obj'></first-child>\                             <second-child value='vm.obj.value'></second-child>\                         ",   controller: function(){     this.obj = {value: 0};     this.$oninit = function(){}     },   controlleras: 'vm',   bindings: {} }) .component('firstchild', {     template: " <button ng-click='vm.plus()'>+</button>\                             <button ng-click='vm.minus()'>-</button>\                         ",   controller: function(){      this.plus = function(){         this.bind.value++;     }      this.minus = function(){         this.bind.value--;     }      this.$oninit = function(){}      this.$onchanges = function(obj){         console.log('first-child changed one-way bindings', obj)         }     },   controlleras: 'vm',   bindings: {     bind: '<'   } }) .component('secondchild', {   template: "<p>{{vm.value}}</p>",   controller: function(){         this.$oninit = function(){}         this.$onchanges = function(obj){             console.log('second-child changed one-way bindings', obj)         }   },   controlleras: 'vm',   bindings: {     value: '<'   } })

as advise think should work two-way in first child directly on value , one-way in second-child directly value too.

your fiddle correction


Comments

Post a Comment

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more