Почему моя двусторонняя привязка данных не работает в ионной?

Question

Во время работы над проектом в ионном я заметил, что мои две привязки к данным перехватывают. Я действительно не могу понять, почему это так.

Я попытался создать новый ионный проект с «ионным запуском 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' 
     } 
    } 
    }) 

Answer 1

Вы должны использовать ng-bind. От AngularDocs

Атрибут ngBind говорит AngularJS заменить текстовое содержание указанного HTML элемента со значением данного выражения, и обновить содержание текста, когда значение этого выражения изменяется

заменить

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

с

<strong>Full name:</strong> <span ng-bind="getFullName()"></span><br />