i am trying to inject $http into directive controller like the following :
JS
app.direcitve('customDirecitve',function(){
return : 'E',
scope : {
url : "#",
urlParams : "#"
} ,
controller : ['$scope', '$http', function($scope, $element, $attrs, $transclude,$http) {
$http.post($scope.url,$scope.urlParams).success(function (data) {
});
]};
});
what is wrong with this injection ?
You have to respect the same order for your injections :
controller : ['$scope','$element', '$attrs', '$transclude', '$http', function($scope, $element, $attrs, $transclude, $http) {
$http.post($scope.url,$scope.urlParams).success(function (data) {
});
Related
I create a custom directive sites in app.js file.
app.directive('sites',function ($rootScope) {
var siteController =['services','$scope','$rootScope' , function(services,$scope,$rootScope){
// From this function i return promise
$scope.getAllSiteService = function() {
return services.getSiteList($scope.panel.panelConfig.moduleAlias,$scope.searchText,$scope.startSitePosition);
}
$scope.$on('loadsiteonedit',function(args){
return services.getSiteList(args.alias,args.searchText,args.startPosition);
});
}];
return{
restrict : 'E',
controller: siteController,
template : '/site/site.html'
}
});
My Controller is
app.controller('dataVisualisationPanelCtrl', [ '$scope', '$http', '$modalInstance', '$modal', '$log', '$rootScope', 'panel', 'services', 'callfrom', '$q','loadJS',
function($scope, $http, $modalInstance, $modal, $log, $rootScope, panel, services, callfrom, $q,loadJS) {
$scope.onload = function() {
var scopeData ={
"alias" : $scope.panel.panelConfig.module,
"searchText" : '',
"startPosition" : $scope.startSitePosition
}
// Both are used respectively.
$scope.$emit('loadsiteonedit',scopeData );
$scope.$broadcast('loadsiteonedit', scopeData );
}}]);
From custom directive i need to return promise to controller. how can i achieve this.
Note : We are using angular 1.2
Here is my directive:
app.directive('gwQuestionSet', function (QuestionSetFactory, _) {
'use strict';
return {
restrict: 'A',
templateUrl: '/Classification/templates/question-set.html',
scope: {
'gwPlQuestionSet': '='
},
controller: ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http, _) {
var set = $rootScope.QuestionSets;
var getquestionSets = QuestionSetFactory.create();
var questionSets = getquestionSets.getQuestionSetViewModel(set);
$scope.questionSets = questionSets;
}]
};
});
My question is if I reset the data of $rootScope.QuestionSets from my main controller, can these code in directive controller be revoked and the template get refreshed?
I would like to know if it is possible (if it is, so how? :)), to inject a dependency to a controller called by a directive.
I have a controller controller called MyCtrl. Here is his signature:
app.controller('MyCtrl', function ($scope, dataService, aDependency){...}
This Controller is usually defined in my route:
.segment('myPage', {
templateUrl: templatesUrl + 'mypage.html',
resolve: {
aDependency: ['$q', 'dataService', '$location', function ($q, dataService, $location) {
var defer = $q.defer();
dataService.retrieveCCData(defer, $location);
return defer.promise;
}],
},
controller: 'MyCtrl'
})
But now, I would also like to call this controller from a directive.
Problem is that I don't know How to inject the aDependency.
It said that the provider is unknown.
Here's my directive:
app.directive('gettingStarted1', ['dataService', function (dataService) {
return {
restrict: 'E',
templateUrl: templatesUrl + 'mypage.html',
controller: 'MyCtrl',
//resolve: {
//datasources: ['dataService', function (dataService) {
//return null;
//}]
//}
};
}]);
Resolve is impossible in directive.
Some help will be appreciate
Thank you
Make aDependency a separate service.
app.provider('aDependency', function () {
this.$get = ['$q', 'dataService', '$location', function ($q, dataService, $location) {
var defer = $q.defer();
dataService.retrieveCCData(defer, $location);
return defer.promise;
}];
});
You can resolve it with
resolve: {
'aDependency': 'aDependency',
}
or
resolve: ['aDependency'];
you could use the controller Function from the directive
.directive("sampledirective", function (dependancy1, dependancy2, ....) {
return {
scope: '=',
controller: function ($rootScope, $scope) {
//DO your controller magic here where you got your scope stuff
}
}
})
One thing i learned it seems the $scope values arent immediatly updated from directive to Controller. If you use objects like
$scope.smth.smth = 'test'
It gets updated immediatly else you would need to $apply
I'm trying to open a Bootstrap UI $modal inside a directive. It works, but when I want to add an 'inline' controller (see commented lines in the code below), I get a "[$injector:unpr] Unknown provider: nProvider <- n" error.
Can anyone tell me why?
angular.module('myApp.directives').directive('eModalForm', ['$modal', function ($modal) {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
$scope.openModal = function () {
console.log('//==//');
var modalInstance = $modal.open({
templateUrl: '/App/Templates/modal.html',
// commented these lines to prevent error:
//controller: function ($scope, $modalInstance) {
// $scope.$modalInstance = $modalInstance;
//},
size: 'lg'
});
};
}
};
}]);
I am calling this function like this:
<div ng-repeat="item in list" ng-click="openModal(item)" e-modal-form>
The controller dependencies are lost during minification, just use the extended syntax:
controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
...
}],
...
I am creating a navBar directive and I would like to use $routeParams to determine which link to set to active. I can access $routeParams in controllers with no problem:
app.controller('MovieDetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$scope.movie = {};
console.log($routeParams);
}]);
However, I am unable to get any data from $routeParams in my directive:
app.directive('navBar', ['$routeParams', function ($routeParams) {
console.log($routeParams);
}]);
What am I doing wrong?
Seems like when the directive is initialized $routeParams is not available. If you use the directive like below as in the plunk it should work.
app.directive('myDir', ['$routeParams', function ($routeParams) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
alert($routeParams.number);
});
}
}
}]);
http://plnkr.co/edit/joHLLqtsUK3xCAVemmeg?p=preview
try with ui router's $state.current.name , it will give you the current route in which you are in