$範圍變量無法從模板訪問

我正在嘗試使用角度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時，調用控制器功能。當我切換視圖時，有什麼辦法可以防止控制器重新召回？

來源

2017-03-05 Paymon Wang-Lotfi

'$ 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。

來源

2017-03-05 06:43:54 deadManN

我更新了我的帖子以反映更改，但仍未獲得$ 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=''使其工作。

來源

2017-03-05 10:19:33

我在我的文章中更新了代碼以反映該變化，但仍沒有收到任何$ scope.selected。 –

$範圍變量無法從模板訪問

回答

相關問題