Динамический ресурс Angularjs

Question

Динамический ресурс Angularjs

0

У меня есть директива для формы поиска. Это дает вам шаблон с <form>, автоматизированные сообщения типа "Нет результатов" и необязательное предложение, например "Вы можете искать по имени или идентификатору".

Моя проблема в том, что я хочу использовать эту директиву, например, для поиска книг, авторов или пользователей на разных страницах моего приложения. Я создал ресурсы (с ngResource) для них, поэтому я хочу динамически передавать эти ресурсы для моей директивы, но я не знаю, как это сделать. Мой код здесь:

angular
    .module('my-app')
    .directive('searchForm', searchForm)
    .controller('searchFormController', searchFormController);

function searchForm() {
    return {
        restrict: 'E',
        scope: {
            info: '@'
        },
        controller: 'searchFormController',
        templateUrl: 'templates/directives/search-form.html'
    };
}

function searchFormController($scope, maybe_dynamic_resource_here) {
    $scope.results = [];

    $scope.searchSubmit = function(form){
        // do the search here calling to the dynamic resource
    };
}

Мой шаблон:

<form name="searchform" ng-submit="searchSubmit(searchform)" novalidate>

<div class="wrapper-form center-block well">
    <div class="input-group">
        <input type="search" ng-model="search" name="search" class="form-control" required>
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit">Search</button>
        </span>
    </div>
</div>

<!-- mensajes -->
<div class="msg-info" ng-show="info && !searchform.$submitted">
    <i class="fa fa-question-circle"></i> {{info}}
</div>

<div class="msg-info" ng-show="searchform.$submitted && !results.length">
    <i class="fa fa-exclamation-triangle"></i> No results found.
</div>
<!-- /mensajes -->

<card-of-results ng-repeat="result in results" />

</form>

И я использую свою директиву так:

<search-form
    info="You can search by name or id."
/>

Возможно, у меня была неправильная концепция обо всех, потому что я новичок в Angular, но для меня это идеальное решение:

<search-form
    info="You can search by name or id."
    resource="Books" <-- this is how I call the dynamic resource
/>

Если есть лучший способ сделать это, все это очень полезно.

Благодарю!

DSanz 25 авг. 2015, в 10:17

Источник

0

Вы должны прочитать об изолированных областях и привязке данных. Точно так же, как вы связываете info вы также должны будете связывать resource , но вместо этого используйте = . Вполне вероятно, что вместо этого вы можете захотеть, чтобы функция & связывала функцию, чтобы вы могли запустить поиск.
dirkk 25 авг. 2015, в 08:23

Теги:

javascript

angularjs

resources

dynamic

1 ответ

Ещё вопросы

Вы должны прочитать об изолированных областях и привязке данных. Точно так же, как вы связываете info вы также должны будете связывать resource , но вместо этого используйте = . Вполне вероятно, что вместо этого вы можете захотеть, чтобы функция & связывала функцию, чтобы вы могли запустить поиск.

maddygoround · Answer 1 · 2015-08-25T11-35-00.000Z

я понимаю, хочу, чтобы вы хотели достичь.i попытается предоставить решение, которое я мог бы скрыть

сначала я бы создал фабрику для serach.

 .factory('SearchAPI', function ( $resource) {
     return {
         search: function () {
             return $resource('search/:path/:id', {}, {
                 books: {
                     method: 'GET',
                     params: { path: 'books' }
                 },
                 authors: {
                     method: 'GET',
                     params: { path: 'authors' }
                 },
                 users: {
                     method: 'GET',
                     params: { path: 'users' }
                 }
             })
         }
     }
 });

Теперь с моим контроллером вызов будет выглядеть так:

тип будет книгой, автором, пользователем

  $scope.searchSubmit = function(type){
      switch(type){
       case 'books' : 
         SearchAPI.search().books(function(data){

         });
        break;
        case 'authors' : 
           ......
    };
}

или более простой

.factory('SearchAPI', function ( $resource) {
      return $resource('search/:path/:id', {}, {
              get: {
                  method: 'GET',
                  params: { path: '@path' }
              },
       });

});

и тогда ваш звонок будет

 $scope.searchSubmit = function(type){ 
       SearchAPI.get({path : type}).then(function(data){

        });
}