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

0

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

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.
             };
          }
       };
    });

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

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, и это даже моя первая директива, поэтому я немного смущен. Каждая помощь будет оценена по достоинству. Спасибо, парни :)

Теги:

2 ответа

1
Лучший ответ

В вашем приложении 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 в своей директиве и манипулировать данными там.

Поделиться
  • 0
    Спасибо, я перенес запрос http в директиву. И это сработало. Я надеюсь, что это будет делать то, что я хочу :)
  • 0
    И у меня есть еще один вопрос. Теперь, когда я получил данные по http-запросу, как я могу передать эти данные в мой html.file? (Шаблон)
Показать ещё 1 комментарий
1

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню