AngularJS数据绑定无法正常工作

发布时间：2020-12-17 17:37:38 所属栏目：安全来源：网络整理

导读：我在 http://jsfiddle.net/gsche/1/上写了一些简化的代码单击“刷新”链接时,“customer.name”模型不会更新视图. 我在本地计算机上编写了代码,并在Chrome中使用Batarang进行了调试. 控制台不显示任何错误. Batarang中的Model页面显示右侧更改的客户名称,与

我在 http://jsfiddle.net/gsche/1/上写了一些简化的代码

单击“刷新”链接时,“customer.name”模型不会更新视图.

我在本地计算机上编写了代码,并在Chrome中使用Batarang进行了调试.

控制台不显示任何错误. Batarang中的Model页面显示右侧更改的客户名称,与旧范围ID相关联,但$scopes的ID也会更改.

谁能指出我正确的方向？

<div ng-app>
    <div ng-controller="MainCtrl">
         <p> <a href="#" ng-click="Refresh()">Refresh</a> </p>
        <p>
            <input type="text" ng-model="customer.name">
        </p>
        <p>{{ customer.name }}</p>
    </div>
</div>


function MainCtrl($scope) {


    $scope.customer = {
        name: 'TTT',id: 0
    };

    $scope.Refresh = function ($scope) {
        $scope.customer.name = 'Test';

    };

}

更新1 08.08.2013
谢谢大家(@EpokK,@Stewie,@希波克拉底).我现在不明白jsfiddle的问题,这个例子可以正常工作.

但是,在我的测试应用程序中,{{customer.name}}绑定有效,但“刷新”单击仍然不会更改视图中的{{customer.name}}.

这是我的申请内容.我认为它与jsfiddle示例相同：

的index.html

<!doctype html>
  <head>
    <title>Test</title>
</head>
  <body ng-app="roaMobileNgApp">


    <script src="scripts/angular.js"></script>

    <script src="scripts/angular-ui.js"></script>
    <link rel="stylesheet" href="scripts/angular-ui.css">

    <div class="container" ng-view=""></div>

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>


</body>
</html>

app.js

'use strict';

angular.module('roaMobileNgApp',['ui'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/',{
        templateUrl: 'views/main.html',controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

main.js

'use strict';

angular.module('roaMobileNgApp')
  .controller('MainCtrl',function ($scope) {


    $scope.customer = {name: '',id: 0};



    $scope.getDetails = function() {
        $scope.customer.name = 'Test';
    };

  });

main.html中

<div ng-controller="MainCtrl">

    <a href="#" ng-click="getDetails()">Refresh</a>
    <p><input type="text" ng-model="customer.name"> {{ customer.name }} </p>

</div>

解决方法

只需在小提琴选项中选择“No wrap-in”(因为否则你的演示不起作用),并从Refresh函数中删除$scope参数.您不需要传入$scope,因为函数本身是在$scope内定义的.

$scope.getDetails = function(){
  $scope.customer.name = 'Test';
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!