從$ watch輸入中打印數據

我是AngularJS的新手，但我必須開發一個搜索選項卡，其中打印出$http.getJSON。

我的邏輯是將ng-model加上$watcher並打印數據。

我做得對嗎？有沒有其他的建議可以做得更好？

這裏婁我粘貼代碼：

discover.js

var discover = angular.module('app.discover', ['discover.factory']); 

discover.controller('getDiscover', [ '$scope', 'img', 'search', function ($scope, img, search) { 

    var data = this; 

    $scope.$watch('searchStr', function (substring) { 
    if (substring && substring.length > 1) { 
     search.getJSON(substring).then(function (response) { 
     data.stories = response.stories; 
     data.tags = response.tags; 
     data.users = response.users; 
     }); 
    } 
    }); 
}]);

_discover.html

<div style="padding-top:50px;"> 
    <article> 
    <section> 
     {{my.stories}} 
     {{my.tags}} 
     {{my.users}} 
    </section> 
    </article> 
</div>

編輯

調查更多我誤解了我將要嘗試解釋的真正問題。

.state('discover', { 
    url: "/discover", 
    views: { 
     'header': { templateUrl: "app/Topbar/_topbarDiscover.html", controller: 'getDiscover', controllerAs: 'my' }, 
     'content': { templateUrl: "app/Discover/_discover.html", controller: 'getDiscover', controllerAs: 'my' }, 
     'footer': { templateUrl: "app/Navbar/_navbar.html", controller: 'NavbarController', controllerAs: 'my' } 
    } 
});

這裏的主要問題是，我明白，寫作同樣controller意味着我用了2 ui-views相同controller，但事實是第一controller打電話的動作，所以它是頂欄controller: getDiscover這有數據。

來源

2016-05-21 DevStarlight

你是否從服務'getJson'方法獲得'response'中的任何東西？ – Sajal

@ Dev-One以'console.log'作爲迴應我得到'object' – DevStarlight

'object'有什麼？ – Sajal

這個的替代將是使用關聯數組保持對象文本，以什麼需要

$scope.print = {stories: '', tags: '', users: ''};

進行打印時，可以使用$watch在這裏，因爲它會監測模型$scope.searchStr任何變化。請記住，即使單個字符被輸入到模型中，該函數也會被調用。您可以從angularJS API文檔中查找ng-blur作爲替代方法。

$scope.$watch('searchStr', function (substring) { 
    if (substring && substring.length > 1) { 
     search.getJSON(substring).then(function (response) { 
     //parse Json 
     var parsedData = JSON.parse(response.data); 

     $scope.print.stories = parsedData.stories; 
     $scope.print.tags = parsedData.tags; 
     $scope.print.users = parsedData.users; 
     }); 
    } 
});

使用$http服務，$resource返回的response.data形式的有效載荷。因爲，你的服務返回一個JSON，你需要在視圖上打印之前解析它。

<div style="padding-top:50px;"> 
    <article> 
    <section> 
     {{print.stories}} 
     {{print.tags}} 
     {{print.users}} 
    </section> 
    </article> 
</div>

來源

2016-05-21 16:49:53 Sajal

從$ watch輸入中打印數據

回答

相關問題