2017-02-12 3 views
0

イオンでプロジェクトに取り組んでいるうちに、私は2つのデータバインディングに気づきました。 私は本当になぜこれが当てはまるのかについて頭を上げることはできません。私の双方向データバインディングがイオン性で機能しないのはなぜですか?

"ionic start myApp sidemenu"で新しいイオンプロジェクトを作成してデータバインディングをテストしようとしましたが、新しいプロジェクトでも機能しません。私は何か間違ったことをしているのですか、これは本当にうかがいますか?

Link to the working databinding example i'm following 入力フィールドを入力すると、名前、姓およびフルネームが更新されます。このコードをイオンプロジェクトに追加すると、最初/最後の名前のみが更新されますが、フルネームは更新されず、コントローラで初期化された値にとどまります。 $ scope.firstNameと$ scope.lastNameはコントローラでは「ライブ更新」されず、何らかの理由でビュー内でのみ表示されるのが好きです。 私は、入力フィールドに記入した後、$ scope.firstNameをログコンソールしようとした場合、それはまだ「ジョン」(初期値)とない私は満たされた値を返しイオンで

コード:

HTML

<ion-view view-title="Search"> 
    <ion-content> 
    <strong>First name:</strong> {{firstName}}<br /> 
    <strong>Last name:</strong> <span ng-bind="lastName"></span><br /> 
    <strong>Full name:</strong> {{getFullName()}}<br /> 
    <br /> 
    <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> 
    <label>Set the last name: <input type="text" ng-model="lastName"/></label> 
    </ion-content> 
</ion-view> 

コントローラ:

angular.module('starter.controllers', []) 

.controller('SearchCtrl', function($scope) { 

    // Initialize the model variables 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 

    // Define utility functions 
    $scope.getFullName = function() 
    { 
    return $scope.firstName + " " + $scope.lastName; 
    }; 

}) 

ルーティング:

angular.module('starter', ['ionic', 'starter.controllers']) 

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/menu.html', 
    controller: 'AppCtrl' 
    }) 

    .state('app.search', { 
    url: '/search', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/search.html', 
     controller: 'SearchCtrl' 
     } 
    } 
    }) 

答えて

0

ng-bindを使用する必要があります。 AngularDocsから

ngBind属性は、その式の値が

を変更したときにテキストの内容を更新する 与えられた式の値を持つ指定されたHTML要素、および のテキストの内容を置き換えるためにAngularJSを伝えます

<strong>Full name:</strong> {{getFullName()}}<br /> 

を置き換えます

+0

これは私のためには機能しませんでした。まだ2ウェイバインディングを適用していません – forgotteng

+0

あなたが与えたリンクは機能しているようです。 ngモデルに何か問題があるはずです。 – digit

+0

はいリンクの例では動作しますが、自分のイオンプロジェクトでこのコードをコピーすると、getFullNameがバインドされません。リンクの例では、フィールドに記入するとフルネームも更新されます。私がイオンプロジェクトでこれを行うとき。それは – forgotteng

関連する問題