2016-06-04 3 views
1

значение никогда не показывается на DOM и я просто пытаюсь увидеть, если работает таким образом ..Angularjs: создать новую область свойство внутри директивы

Что я пытаюсь сделать, это создать новую область значение внутри директивы и показать его DOM

app.directive("rest", ["restFactory", function($rest){ 
    return { 
     restrict: "A", 
     scope: { 
      uri: "@rest", 
     }, 
     link: function(scope){ 
      scope.$rest = []; 

      $rest.batch(scope.uri) 
       .then(function(data){ 
        scope.$rest = data; 
       }); 
     } 
    } 
}]); 

данные я пытаюсь показать, приходит из функции, которая возвращает обещание, и с обещанием приходит данные я хочу использовать в DOM

HTML кодируется следующим образом:

<div rest="accounts"> 
    <div ng-repeat="data in $rest"> 
     {{data.id}} 
    </div> 
</div> 

это первая директива, которую я когда-либо делал.

ответ

1

Я сделал this plunker, чтобы объяснить, почему ваша директива не работает.

<div rest="accounts"> 
    <!-- You can't access the directive variable $rest from here 
     The directives variables are only available on it's template. --> 
    <div ng-repeat="data in $rest"> 
     {{data.id}} 
    </div> 
</div> 


Это будет работать:

app.directive("restTwo", function() { 
    return { 
     restrict: "A", 
     scope: {}, 
     // It will work. I put the template in here. 
     // You can only access the directive variables from it's template 
     template: '<div ng-repeat="data in $rest">{{data.id}}</div>', 

     link: function(scope, el, attr) { 
      console.log(attr.rest); // output = accounts 

      //data 
      scope.$rest = [{ 
       'id': 1, 
       'name': 'John Doe' 
      }, { 
       'id': 2, 
       'name': 'Johana Doe' 
      }]; 
      console.log(scope.$rest); 
     } 
    } 
}); 


Я предлагаю вам сделать фабрику и сделать свой апи вызов в нем, как это:

app.factory('myFactory', function($http) { 

    // GET example 
    this.get = function(string) { 
     return $http({ 
      method: 'GET', 
      url: 'https://api.github.com/search/repositories?q=' + string 
     }); 
    } 

    // Your request here 
    this.yourRequest = function(uri) { 
     // return $rest.batch(uri); 
    } 

    return this; 
}); 

И в контроллере :

Вид:

<div ng-repeat="data in myData"> 
    {{data.id}} 
</div> 


Если вы действительно хотите использовать директиву для этого (я не рекомендую):
Директива:

app.directive("restThree", function() { 
    return { 
     restrict: "A", 
     scope: { 
      'data': '=' 
     }, 
     link: function(scope, el, attr) { 
      //console.log(attr.rest); // output = accounts 

      //data 
      scope.$rest = [{ 
       'id': 1, 
       'name': 'John Doe' 
      }, { 
       'id': 2, 
       'name': 'Johana Doe' 
      }]; 

      scope.data = scope.$rest; 
     } 
    } 
}); 

Вид:

<div rest-three="accounts" data="directiveData"> 
    <div ng-repeat="data in directiveData"> 
     {{data.id}} 
    </div> 
</div> 
+1

спасибо за объяснение anation, я буду держать все это в виду – nosthertus

+0

Добро пожаловать :) –

+0

@nosthertus Я забыл сохранить последнюю версию плункера. Теперь он обновлен –

Смежные вопросы