NG-模型不BTW工作2个指令（离子）

http://play.ionic.io/app/81ff26fc9a28 NG-模型不BTW工作2个指令（离子）

<body ng-app="app"> 
    <ion-pane ng-controller="myCtrl"> 
     <ion-header-bar class="bar-stable"> 
     </ion-header-bar> 
     <ion-content class="padding"> 
     <input ng-model="myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search"/> 


     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <ion-footer-bar ng-show="!loading" align-title="center"> 
    <div class="padding" style="position:absolute;bottom:0;width:100%"> 
     <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button> 
    </div> 
    </ion-footer-bar> 


     </ion-content> 

     <ion-footer-bar ng-show="!loading" align-title="center"> 
    <div class="padding" style="position:absolute;bottom:0;width:100%"> 
     <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button> 
    </div> 
    </ion-footer-bar> 


    </ion-pane> 
    </body>

如何解决这个问题呢？为了样式的缘故，我必须将点击事件和输入字段放在两个不同的指令中，但是这导致了我无法获得ng-model的价值的问题。

来源

2016-05-13 Jamie Jordan

邮政相关的代码，不只是给一个链接到另一个网站。 – Yatrix

@Yatrix ok更新了我的问题 –

这是固定的代码http://play.ionic.io/app/77035b24f58a

的问题是，$scope两者按钮是不同的，所以$scope.myInput值不正确地共享。

一种解决方案是添加$scope.model = {};并参考模型对象，如ng-model="model.myInput"和ng-click="search(model.myInput)"。然后内部作用域将访问同一个对象model。

这是简化的代码演示这个问题

var scope = {}; 
scope.myInput = '1'; 
var innerScope = Object.create(scope); 
console.log(innerScope.myInput); // 1 
innerScope.myInput = '2'; // myInput is 2 on innerScope 
console.log(innerScope.myInput); // 2 
console.log(scope.myInput); // 1 <-- but still 1 on scope 

scope.model = {}; 
scope.model.myInput = '1'; 
console.log(innerScope.model.myInput); // 1 
innerScope.model.myInput = '2'; // 
console.log(innerScope.model.myInput); // 2 
console.log(scope.model.myInput); // 2 <-- modify model.Input is visible on parent scope because they are modifying a same model object

来源

2016-05-13 01:49:44

这是使用$scope是有问题的情况。一种可能的解决方案是使用ControllerAs syntax代替。

ControllerAs语法允许您轻松识别某个特定功能或属性属于哪个控制器，并强制“始终使用点”规则来避免任何prototype inheritance issues。

这不是解决问题的唯一方法，但这是一个解决方案，它将帮助您构建更加健壮的应用程序，并减少与$scope相关的问题。

http://play.ionic.io/app/df429e85d209

angular.module('app', ['ionic']) 
 

 

 

 
.controller('myCtrl', function() { 
 
    var ctrl = this; 
 
    ctrl.search = function(value) { 
 
    alert(value); 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
 
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <ion-pane ng-controller="myCtrl as ctrl"> 
 
    <ion-header-bar class="bar-stable"> 
 
    </ion-header-bar> 
 
    <ion-content class="padding"> 
 
     <input ng-model="ctrl.myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search" /> 
 

 

 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <ion-footer-bar ng-show="!loading" align-title="center"> 
 
     <div class="padding" style="position:absolute;bottom:0;width:100%"> 
 
      <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button> 
 
     </div> 
 
     </ion-footer-bar> 
 

 

 
    </ion-content> 
 

 
    <ion-footer-bar ng-show="!loading" align-title="center"> 
 
     <div class="padding" style="position:absolute;bottom:0;width:100%"> 
 
     <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button> 
 
     </div> 
 
    </ion-footer-bar> 
 

 

 
    </ion-pane> 
 
</body> 
 

 
</html>

来源

2016-05-13 01:53:20 Claies

NG-模型不BTW工作2个指令（离子）

回答

相关问题