Переменная AngularJS от контроллера к директиве

Я хотел бы спросить вас, возможно ли это, и если да, то как я могу передать некоторую переменную от контроллера к директиве. Вот немного моего кода:Переменная AngularJS от контроллера к директиве

app.js

var VirtualGallery = angular.module('virtualGallery', ['VirtualGalleryControllers', 'ngRoute']); 

VirtualGallery.constant('apiURL', 'roomPicture'); 

VirtualGallery.run(['$rootScope', function ($rootScope) { 
    $rootScope.roomPictures = []; 
}]); 

var VirtualGalleryControllers = angular.module('VirtualGalleryControllers', ['ngRoute']); 

VirtualGalleryControllers.controller('AppCtrl', function ($http, $rootScope, $scope, apiURL, $q) { 
$scope.getallrooms = function() { 
    $http.get(apiURL) 
     .success(function (data) { 
      $rootScope.roomPictures = data; //idk whether to use $scope or $rootScope 
     }); 
    }; 
});

В этом app.js я пытаюсь получить некоторые данные из БД, и эти данные нужно использовать в директиве ,

Директива

angular.module('virtualGallery') 
    .directive('ngWebgl', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      'getallrooms': '=', 
      'roomPictures': '=' 
     }, 
     link: function postLink(scope, element, attrs) { 
      scope.init = function() { 
       //here I would like to be able to access $scope or $rootScope from app.js file. 
      }; 
      } 
     }; 
    });

В директиве мне нужно, чтобы получить доступ к $ объема или $ rootScope в функции инициализации(), где мне нужно использовать эти данные.

HTML

<body ng-app="virtualGallery"> 
<div class="container" ng-controller="AppCtrl"> 

<div 
    id="webglContainer" 
    ng-webgl 
    getallrooms="getallrooms" 
    roomPictures="roomPictures" 
    ></div> 
    <p ng-model="roomPictures"></p> 
    <p ng-model="getallrooms"></p> 
</div> 
<script type="text/javascript" src="js/vg.js"></script> 
<script type="text/javascript" src="js/ngWebgl.js"></script>

В HTML Я пытаюсь передать эти данные из app.js в директиве.

Im совершенно новый для Angular, и это даже моя первая директива, поэтому я немного смущен. Каждая помощь будет оценена по достоинству. Спасибо, ребята :)

источник

2016-07-30 marek

В вашем app.js использовать контроллер как этого

VirtualGalleryControllers.controller('AppCtrl', function ($http, $rootScope, $scope, apiURL, $q) { 
$scope.getallrooms = function() { 
    $http.get(apiURL) 
     .success(function (data) { 
      $scope.roomPictures = data; //use $scope instead of $rootScope 
     }); 
    }; 
});

Тогда для директивы:

angular.module('virtualGallery') 
.directive('ngWebgl', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     pictures: '=virtualGallery' 
    }, 
    link: function postLink(scope, element, attrs) { 
     scope.init = function() { 
      // you can access the variable through the scope 
      scope.pictures; 
     }; 
    } 
    }; 
});

Или вы могли бы просто сделать запрос HTTP в вашей директиве и манипулировать данные там.

источник

2016-07-30 11:06:42

Спасибо, я перевел запрос http в директиве. И это сработало. Я надеюсь, что это сделает то, что я хочу :) – marek

И у меня есть еще один вопрос. Теперь, когда я получил данные по HTTP-запросу, как я могу передать эти данные в свой html.file? (Template) – marek

Просто добавьте данные в область действия и получите доступ к ней как угловой переменной в двойных фигурных скобках или используя ng-bind –

Вы можете ввести $ rootScope в свою директиву (как и в вашем контроллере), а затем получить доступ к этой переменной rootScope.

источник

2016-07-30 10:57:23

Переменная AngularJS от контроллера к директиве

ответ

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