angularJs select绑定的model 取不到值

简介: angularJs select绑定的model 取不到值,原型继承的关系,父子级作用域,ng-if 以及 ng-repeat 会创建一个子级作用域
内容结构         

      一.原因分析

      二. 解决办法 

一.原因分析        
          1.由于原型继承的关系,修改父级对象中的someBareValue会同时修改子对象中的值,但反之则不行。
          2.ng-if 以及 ng-repeat 会创建一个子级作用域,如果在这俩个指令中添加了元素,并增加ng-model指令,那么ng-model对应的作用域属于子级作用域,并非controller注入的$scope对应的作用域。
二.解决办法(推荐使用第一种方式)       
         1.如果将模型对象的某个属性设置为字符串,它会通过引用进行共享,因此在子$scope中修改 属性也会修改父$scope中的这个属性。下面的例子展示了正确的做法:
  <div ng-controller="SomeController">
         {{ someModel.someValue }}
         <button ng-click="someAction()">Communicate to child</button>
         <div ng-controller="ChildController">
         {{ someModel.someValue }}
             <button ng-click="childAction()">Communicate to parent</button>
         </div>
</div>
     angular.module('myApp', [])
     .controller('SomeController', function($scope) {
// 最佳实践,永远使用一个模式 
       $scope.someModel = {
             someValue: 'hello computer'
         }
         $scope.someAction = function() {
             $scope.someModel.someValue = 'hello human, from parent';
}; })
     .controller('ChildController', function($scope) {
         $scope.childAction = function() {
             $scope.someModel.someValue = 'hello human, from child';
         };
}); 
    2.使用父级作用域                            
<select class="form-control m-b" ng-model="$parent.data"  ng-options="item.id as item.name for item in datas">
      <option value="">-- 请选择 --</option>
</select>
目录
相关文章
|
3月前
|
安全
如何在 Angular 中使用 innerHTML 属性绑定
如何在 Angular 中使用 innerHTML 属性绑定
45 0
|
6月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
两步教你用Vue3+TS实现input组件的v-model属性
使用过一些ui框架的同学应该都知道input里面的值有一个绑定的v-model属性,这篇文章教大家如何给自己定义的input组件写一个v-model的绑定属性 第一步
630 0
两步教你用Vue3+TS实现input组件的v-model属性
|
前端开发 JavaScript
angularJS中ng-class指令的三种实现方式
angularJS中ng-class指令的三种实现方式
100 0