AngularJS数据绑定不工作

我在上面写了一些简化的代码

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

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

控制台没有显示任何错误。Batarang中的模型页面在右侧显示了与旧范围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';

    };

}

main.js

main.html

---

只需选择No wrap-in-fiddle选项，否则您的演示将无法工作，并从刷新函数中删除$scope参数。您不需要传入$scope，因为函数本身是在$scope中定义的

$scope.getDetails=函数{ $scope.customer.name='Test'； };

---

这只是你加载脚本的方式

我喜欢加载angular，后面是我的app.js，其中包含位于正文末尾的控制器：

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

为了让你的小提琴工作，我所做的只是把它从onReady改为in-body，它是左上角附近的一个小下拉菜单

看看这个：

---

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

检查我的解决方案，我已编辑您的JSFIDLE:

---

谢谢大家。JSFIDLE问题已经解决，但是我的应用程序中的刷新链接仍然没有更新customer.name。我用源文件更新了我的问题。我得到了问题的答案。a href=导致页面刷新。如果有人有同样的问题，请查看HTML5是否有效，在锚元素中不需要HREF，这样您就可以删除它。@Stewie您能帮我解决这个问题吗

'use strict';

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

'use strict';

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


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



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

  });

<div ng-controller="MainCtrl">

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

</div>

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

function MainCtrl($scope) {

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

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

}