将范围传递给 AngularJS 上的服务 [英] Pass scope to Service on AngularJS

问题描述

我是 AngularJS 的新手，我想将范围传递给服务，以便我可以根据 scope.value 执行标签搜索.

<div><input type="text" value={{value}} data-ng-model='value'/>
<p data-ng-hide="value">输入标签</p><p data-ng-show="value">...寻找{{value}}</p><ul><li data-ng-repeat="r in results"><a><img ng-src="{{r.images.thumbnail.url}}" alt=""/></a>

这里是JS

var app = angular.module('instaSearch', ['ngResource']);app.factory('instagram', function($resource){返回 {搜索标签:函数(回调){var api = $resource('https://api.instagram.com/v1/tags/:tag/media/recent?client_id=:client_id&callback=JSON_CALLBACK',{client_id: '3e65f044fc3542149bcb9710c7b9dc6c',标签:'狗'},{获取:{方法:'JSONP'}});api.fetch(函数(响应){回调(响应数据)；});}}});app.controller('search', function($scope, instagram){$scope.$watch('value', function(){$scope.results = [];instagram.searchTag(功能(数据){$scope.results = 数据；});});});

工作示例

解决方案

您可以使用 $scope.value 访问该值.

app.factory('instagram', function ($resource) {返回 {searchTag:函数(标签，回调){var api = $resource('https://api.instagram.com/v1/tags/:tag/media/recent?client_id=:client_id&callback=JSON_CALLBACK', {client_id: '3e65f044fc3542149bcb9710c7b9dc6c',标签: 标签}, {拿来: {方法:'JSONP'}});api.fetch(函数(响应){回调(响应数据)；});}}});app.controller('search', function ($scope, instagram) {$scope.$watch('value', function () {$scope.results = [];instagram.searchTag($scope.value, function (data) {$scope.results = 数据；});});});

演示:http://codepen.io/anon/pen/GHbIl

I'm pretty new to AngularJS, I want to pass the scope to a service so I can perform a tag search based on the scope.value.

<div data-ng-app="instaSearch" data-ng-controller="search">

  <div>
    <input type="text" value={{value}} data-ng-model='value'/>
  </div>

 <p data-ng-hide="value">type a tag</p>
 <p data-ng-show="value">...looking for {{value}}</p>


<ul>

  <li data-ng-repeat="r in results">
    <a>
      <img ng-src="{{r.images.thumbnail.url}}"  alt="" />
    </a>
  </li>

</ul>  

</div>

Here is the JS

var app = angular.module('instaSearch', ['ngResource']);

app.factory('instagram', function($resource){

    return {
    searchTag: function(callback){

      var api = $resource('https://api.instagram.com/v1/tags/:tag/media/recent?client_id=:client_id&callback=JSON_CALLBACK',{
                client_id: '3e65f044fc3542149bcb9710c7b9dc6c',
        tag:'dog'
            },{
                fetch:{method:'JSONP'}
            });

            api.fetch(function(response){
                callback(response.data);

            });
    }
    }

});

app.controller('search', function($scope, instagram){

  $scope.$watch('value', function(){
    $scope.results = [];

    instagram.searchTag(function(data){
      $scope.results = data;
    });
  });

});

working example

解决方案

You can access the value using $scope.value.

app.factory('instagram', function ($resource) {
    return {
        searchTag: function (tag, callback) {
            var api = $resource('https://api.instagram.com/v1/tags/:tag/media/recent?client_id=:client_id&callback=JSON_CALLBACK', {
                client_id: '3e65f044fc3542149bcb9710c7b9dc6c',
                tag: tag
            }, {
                fetch: {
                    method: 'JSONP'
                }
            });

            api.fetch(function (response) {
                callback(response.data);

            });
        }
    }

});

app.controller('search', function ($scope, instagram) {
    $scope.$watch('value', function () {
        $scope.results = [];
        instagram.searchTag($scope.value, function (data) {
            $scope.results = data;
        });
    });
});

Demo: http://codepen.io/anon/pen/GHbIl

这篇关于将范围传递给 AngularJS 上的服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！