Question

在离子项目中工作时我注意到我的两个数据绑定问题。我真的无法理解为什么会这样。

我尝试用“离子启动myApp sidemenu”制作一个新的离子项目来测试数据绑定，甚至在新项目中也没有用。我是那个做错了什么的人还是这个真的很烦人？

Link to the working databinding example i'm following 正如您在该示例中所看到的，当您填写输入字段时：名字，姓氏和全名获得更新。当我将此代码添加到离子项目时，只更新名字/姓氏，但全名不会更新并保持在控制器中初始化的值。它看起来像$ scope.firstName和$ scope.lastName不会在控制器中“实时更新”，但仅出于某种原因在视图中。如果我在填写输入字段后尝试控制日志$ scope.firstName，它仍会返回'john'（初始值）而不是我填写的值。

离子代码：

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 />

为什么我的双向数据绑定不能在离子中工作？

1 个答案: