Question

我试图用角度js创建SPA。这是我的jsp页面中的代码：

    <body class = "image1"  ng-app = "myApp" ng-controller  = "TasksController">

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

</body>
 <script type = "text/javascript">

var mmyApp = angular.module('myApp',['angularUtils.directives.dirPagination','ngRoute']).controller('TasksController',  TasksController);
 function TasksController($scope, $http, $location) {


     $scope.searchString = null;
    $scope.shopping = {};

    var url = "/Online_Shopping/dispatcher/shopping/123";
     $http.get(url).then(function (response) {

        $scope.shoppings = response.data;


     }, function (error) {
        throw error;
    });
        $scope.selected = "";
        $scope.test = "hello";
     $scope.setSelected = function(shopping) {
                $scope.selected = shopping;
              console.log($scope.selected);

            $location.path("/item");
        };

     $scope.shoppingChanged = function()
     {
         var url = "/Online_Shopping/dispatcher/shopping/" + $scope.shopping;

         $http.get(url).then(function (response) {

             $scope.shoppings = response.data;

         }, function (error) {
             throw error;
         });

     };
 }

    mmyApp.config(function($routeProvider) {
        $routeProvider

            .when('/', {
                templateUrl : '/Online_Shopping/shoppingtable.jsp',
                controller  : 'TasksController'
            })


            .when('/item', {
                templateUrl : '/Online_Shopping/item.jsp',
                controller  : 'TasksController'
            })


    });
 </script>

控制台打印出$scope.selected的正确信息，但当我尝试从我的视图模板访问它时，什么都没有显示。

以下是我的视图模板item.jsp - 适用于{{test}}，但不适用于{{selected}}：

<h1>$scope.test is equal to {{test}}</h1>
<h2>$scope.selected is equal to {{selected}}</h2>

编辑：我在代码中初始化了我的代码中的$ scope.selected，但我仍然没有从视图模板中的$ scope.selected中获取任何值。当我使用$ location重定向到/ items时，似乎调用了控制器功能。当我切换视图时，有没有办法阻止调用控制器？

Answer 1

首次运行应用时，您应该

＆lt; h2＆gt; $ scope.selected等于＆lt; / h2＆gt;

但是当你调用事件或使用某种方法运行时，例如使用ng-click的按钮，或者在初始方法中，或者超时的回调以及存在的许多其他事情，如果你调用 setSelected ，您将获得：

＆lt; h2＆gt; $ scope.selected等于＆lt;购物变量的价值＆gt;＆lt; / h2＆gt;

这是一个示例：

<input type="button" ng-click="setSelected('xyz')"/>

或

---controller begin---
...
     $scope.test = "hello";
     $scope.setSelected = function(shopping) {
                $scope.selected = shopping;
              console.log($scope.selected);
            $location.path("/item");
        };
...
    function initialize(){
        $scope.setSelected("xyz");
    }
    initialize();
---controller end---

将返回：

＆lt; h2＆gt; $ scope.selected等于xyz＆lt; / h2＆gt;

还注意那个this指向对象本身，而不是函数体，而你调用的shopping（this.shopping）是不同的从shopping对象设置为函数的参数。如果您没有在控制器上自定义购物，则可能会获得undefined值，并且您未使用shopping参数。

Answer 2

在angular中，为了使绑定正常工作，您需要声明变量或初始化范围变量以使其正常工作。

在您的情况下，selected未初始化，但test就是为什么测试有效，但selected没有。添加$scope.selected=''以使其正常工作。

$ scope变量无法从模板访问

2 个答案: