$范围变量无法从模板访问

问题描述：

我正在尝试使用角度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时，调用控制器功能。当我切换视图时，有什么办法可以防止控制器重新召回？

'$ scope.selected'在方法中，意味着它不被启动。你已经尝试在方法之前放置'$ scope.selected =“”'。看看它是否有效。 – Smit

您是否正在通过任何事件调用'$ scope.setSelected'并正确传递购物数据，尝试在函数中传递静态值。 –

你可以发表小提琴吗？ –

答

当你第一次运行该应用程序，你应该得到

<H2> $ scope.selected等于</H2 >

但是当你打电话时，或功能使用某种方法，例如使用ng-click的按钮，或初始方法，或超时回调以及其他许多存在的事情，如果您拨打setSelected，您将获得：

<H2> $ scope.selected等于购物可变> </H2 >

这里的<值是一个例子：

<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---

将返回：

<H2> $ scope.selected等于XYZ </H2 >

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

我更新了我的帖子以反映更改，但仍未获得$ scope.selected。控制台正确地返回$ scope.selected的值，但是当进入/ items视图时，scope.selected被清除或控制器被再次调用？ –

@ PaymonWang-Lotfi如果你的包含ng-controller的元素得到删除，然后重新创建它可能会重新启动控制器，否则我永远不会看到它发生。（或ng-view，如果你使用路由器，直到你切换页面）... – deadManN

@ PaymonWang-Lotfi首先，我不确定你到底做了什么，但从我的角度来看，你创建了一个布局，你添加一个父控制器，以控制共享数据，那么你也有你的子路由控制器，你没有识别。他们可能会或可能不会影响此控制器上的数据...第二：您的应用程序运行如下：它将searchString设置为null并将对象购物，您设置了ur，您调用了get操作，将您选择的设置为空字符串，将测试设置为hello，然后将setSelected设置为自定义函数，并将shoppingChanged设置为另一个函数（在此之后我继续在 – deadManN

答

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

在你的情况下，selected未初始化，但test就是这样的原因，为什么测试正在工作，但selected不是。添加$scope.selected=''使其工作。

我在我的文章中更新了代码以反映该变化，但仍没有收到任何$ scope.selected。 –

$范围变量无法从模板访问

相关推荐