AngularJS Variable von Controller zu Direktive

Ich möchte Sie fragen, wenn es möglich ist, und wenn ja, dann wie kann ich eine Variable von Controller zu Direktive übergeben. Hier ist ein bisschen mein Code:AngularJS Variable von Controller zu Direktive

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

In dieser app.js Ich versuche, einige Daten von der DB zu bekommen, und dass Daten, die ich in der Richtlinie verwenden, müssen .

Richtlinie

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

In Richtlinie muss ich Zugriff auf $ Umfang oder $ rootScope in Funktion init gewinnen(), wo ich brauche diese Daten zu verwenden.

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>

In html Ich versuche, dass die Daten von app.js zu übergeben Richtlinie.

Ich bin ziemlich neu zu Angular und das ist sogar meine erste Anweisung, also bin ich etwas verwirrt. Jede Hilfe wird geschätzt. Danke Jungs :)

Quelle

2016-07-30 marek

In Ihrem app.js verwenden Sie die Controller wie diese für Ihre Richtlinie

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

Dann:

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

Oder Sie könnten einfach die HTTP-Anforderung in Ihrer Richtlinie machen und die Daten dort manipulieren.

Quelle

2016-07-30 11:06:42

Danke, ich habe die HTTP-Anfrage in Direktive verschoben. Und es hat funktioniert. Ich hoffe, es wird das tun, was ich will :) – marek

Und ich habe noch eine Frage. Nun, wenn ich die Daten per http-Anfrage erhalten habe, wie kann ich diese Daten an meine html.file übergeben? (Vorlage) – marek

Fügen Sie einfach die Daten zum Geltungsbereich hinzu und greifen Sie darauf als Winkelvariable in doppelten geschweiften Klammern oder mit ng-bind zu –

Sie können $ rootScope in Ihre Anweisung injizieren (wie Sie es in Ihrem Controller getan haben) und dann auf diese rootScope-Variable zugreifen.

Quelle

2016-07-30 10:57:23

AngularJS Variable von Controller zu Direktive

Antwort

Verwandte Themen