的一个组件内输入打破双向AngularJS

结合我创建了一个简单的组件：的一个组件内输入打破双向AngularJS

(function (module) { 
    'use strict'; 
    function SomeCtrl() { 
     this.foo = function (event) { 
      this.someArray.forEach(function (part, index, array) { 
       //somelogic 
       array[index] = array[index] + " (foo)"; 
      });    
     } 
    } 

    module.component('componentName', { 
     templateUrl: 'blah.html', 
     controller: SomeCtrl, 
     bindings: { 
      someArray: '=', 
     } 
    }); 
})(module);

HTML模板也很简单：

<div class="input-group"> 
    <input type="text" class="form-control" ng-model="$ctrl.someArray" /> 
    <span class="input-group-btn"> 
     <a class="btn btn-default" ng-click="$ctrl.foo($event)"> 
      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
     </a> 
    </span> 
</div> 
{{$ctrl.someArray}}

基本上它的一些输入和按钮。输入与数组绑定，并且按钮单击数组被修改。

不幸的是组件表现很奇怪。表达式（{{$ctrl.someArray}}）已更新，但输入值保持不变。

另一方面，当用户修改输入值，然后表达式正确改变。

没有错误抛出，没有任何东西。它甚至不是一个双向绑定，但数据流量的异常块...

来源

2017-04-11 Landeeyo

你能创建一个plunker/fiddle吗？ – tanmay

的问题就出在数组如何更新：

this.someArray.forEach(function (part, index, array) { 
    //somelogic 
    array[index] = array[index] + " (foo)"; 
});

看来， AngularJS没有检测到对数组执行的这种更改。解决方法很简单：

来源

2017-04-12 08:43:27 Landeeyo

var module = angular.module('myApp',[]); 
 
    module.component('componentName', { 
 
    controller: function SomeCtrl() { 
 
     this.foo = function (event, array) { 
 
this.someArray.forEach(function (part, index, array) { 
 
       //somelogic 
 
       // array[index] ={'no':array[index].no+ " foo"}; 
 
       console.log(array[index] ={'no':array[index].no+ " foo"}); 
 
      }); 
 
      
 
     } 
 
    }, 
 
     template: `<div class="input-group"> 
 
    <input type="text" ng-repeat="some in $ctrl.someArray" class="form-control" ng-model="some.no" /><br>{{$ctrl.someArray}} 
 
    
 
     <button class="btn btn-default" ng-click="$ctrl.foo($event, $ctrl.someArray)"> 
 
     Okay 
 
     </button> 
 
    
 
</div>`,   
 
     bindings: { 
 
      someArray: '=', 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
<div ng-init="arrays=[{'no':'1'},{'no':'2'},{'no':'3'},{'no':'4'},{'no':'5'}]"> 
 
<component-name some-array="arrays"></component-name> 
 
</div> 
 
</body>

来源

2017-04-11 15:28:55

的一个组件内输入打破双向AngularJS

回答

相关问题