AngularJS数据绑定不起作用答案

【问题标题】：AngularJS data binding not workingAngularJS数据绑定不起作用
【发布时间】：2013-08-07 14:01:48
【问题描述】：

当我单击“刷新”链接时，“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、@Hippocrates）。我现在不明白 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>

【问题讨论】：

标签： angularjs bind

【解决方案1】：

检查我的解决方案，我已编辑您的 JSFiddle：http://jsfiddle.net/gsche/10/

function MainCtrl($scope) {

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

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

}

【讨论】：

【解决方案2】：

只需在小提琴选项中选择“No wrap - in”（否则您的演示将无法运行），然后从您的 Refresh 函数中删除 $scope 参数。您不需要传入$scope，因为函数本身是在$scope 中定义的。

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

【讨论】：

谢谢大家。 jsfiddle 问题已解决，但我的应用程序中的“刷新”链接仍然没有更新“customer.name”。我用源文件更新了我的问题。
我已经找到了我的问题的答案。 a href="#" 导致页面刷新。如果有人有同样的问题，请参阅stackoverflow.com/questions/18127523/…
在 HTML5 中不需要在锚元素中使用 HREF 是有效的，因此您可以将其删除。
@Stewie 你能帮我解决这个问题吗stackoverflow.com/questions/50073157/…

【解决方案3】：

这只是您加载脚本的方式。

我喜欢在正文末尾加载 angular，然后是包含控制器的 app.js：

...
    <script src="/assets/js/angular.min.js"></script>
    <script src="/assets/js/app.js"></script>
</body>

为了让你的小提琴正常工作，我所做的只是将它从“onReady”更改为“in body”（这是左上角附近的小下拉菜单。）

看看这个：http://jsfiddle.net/gsche/3/

onReady 意味着你的控制器定义被 jsfiddle 封装在一个 onReady 函数中。到 angular 加载并开始工作时，您的控制器仍然未定义，angular 必须继续并吐出原始模板。

【讨论】：