Question

我正在尝试使用路径和视图创建一个非常简单的应用程序，在单击按钮时显示更改为“单击”的测试文本。

我有一个带有ng-view的index.html文件，可以正确调用test.html视图。该视图应该使用带有简单模型的testCtrl.js。

但是当它加载时，视图似乎被调用，但是范围或控制器存在问题。当我点击一个按钮时，单词test应该变成“click”但没有任何反应。

这是index.html

    <body ng-app="simtoolbelt">
    <div ng-view></div>



<script src="js/modules/angular-route.min.js"></script>
<script src="js/controllers/testCtrl.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

这是处理路线和视图的app.js：

    var simtoolbelt = angular.module('simtoolbelt', ['ngRoute']);

    simtoolbelt.config(['$routeProvider',
      function($routeProvider) {
      $routeProvider.
          when('/test', {
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
          }).
          otherwise({
             redirectTo: '/test'
          });
    }]);

测试控制器：

    simtoolbelt.controller('testCtrl', ['$scope', function($scope){

  $scope.test = "test";
  $scope.change = function($scope){
    $scope.test = "Click";
  };

   }]);

最后是测试视图：

    <div ng-controller="testCtrl">
      <h1 ng-model="test">Le {{test}} fonctionne</h1>
      <button ng-click="change()">Click</button>
    </div>

所有这一切都在本地主机中，我真的不知道它是什么我正在酝酿...非常感谢你们给我的任何帮助！

Answer 1

你的函数“change”接受参数“$ scope”。在ng-click中，您调用不带参数的方法。

从change方法中删除参数：

$scope.change = function(){
 $scope.test = "Click";
};

此外，您的ng-model代码中不需要h1属性。

Answer 2

尝试将路由中的控制器定义更改为“仅控制器名称”，如

simtoolbelt.config(['$routeProvider',
  function($routeProvider) {
  $routeProvider.
      when('/test', {
        templateUrl: 'views/test.html',
        controller: 'testCtrl'
      }).
      otherwise({
         redirectTo: '/test'
      });
}]);

我还没有测试它，但它应该可以工作。

角度路线和视图和控制器

2 个答案: