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?
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
I have a controller which has some custom UI router resolve params injected:
uxgroups.controller('UXGroupStepCtrl', ['$scope', '$rootScope', '$stateParams', 'stepData', function ($scope, $rootScope, $stateParams, stepData) {
But when using this controller in my directive I am getting errors that stepData is undefined:
angular.js:14682 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=stepDataProvider%20%3C-%20stepData%20%3C-%20UXGroupStepCtrl%20%3C-%20UXGroupStepCtrl
which is :
Unknown provider: stepDataProvider <- stepData <- UXGroupStepCtrl <- UXGroupStepCtrl
Here is directive definition:
app.directive('passProcess', function (stepData) {
return {
restrict: 'E',
controller: 'UXGroupStepCtrl',
scope: { p: '=' },
templateUrl: '/App/Modules/UXGroup/Views/process.html'
};
});
Is there a way to dismiss or define the extra params in my directive controller?
You can't pass data to controller from a directive like that. But the controller has the same scope as the directive. So what you can do is set a $scope variable in the directive and reference it in the controller.
app.directive('passProcess', function (stepData) {
return {
restrict: 'E',
controller: 'UXGroupStepCtrl',
scope: { p: '=' },
templateUrl: '/App/Modules/UXGroup/Views/process.html'
};
});
uxgroups.controller('UXGroupStepCtrl', ['$scope', '$rootScope', '$stateParams',
function ($scope, $rootScope, $stateParams) {
$scope.variable = $scope.p
}
Just found this other question Injecting resolves into directive controllers
which suggests it cannot be done, and best way is to make a separate controller for the directive
I am trying to display a dynamic form which contains custom directives as a modal. I have tried to use ng-bind-html but the html content that has custom directive shows up empty and throws error "The sanitizer was unable to parse the following block of html:"
Here is the running demo. Please advise.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngSanitize']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.textvalue = "";
$scope.cbvalue = "";
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.textvalue;
$scope.ddvalue;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
angular.module('ui.bootstrap.demo').directive('customTextinput', function(){
return {
restrict: "EA",
scope: {
label: "=",
fieldvalue: "="
},
templateUrl: "customti.html",
controller: function($scope, $log){
}
}
})
angular.module('ui.bootstrap.demo').directive('customDropdown', function(){
return {
restrict: "EA",
scope: {
label: "="
},
templateUrl: "customcb.html",
controller: function($scope, $modal, $sce){
$scope.showModal = function(){
var modalInstance = $modal.open({
animation:true,
templateUrl: 'modaldemo.html',
backdrop: 'static',
controller: function($scope, $log, $modalInstance){
$scope.myContent = '<custom-textinput label="\'Text Input\'" ng-model="textvalue"';
//$scope.myContent = "<p>Hello World</p>";
$scope.ok = function () {
$modalInstance.close('');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
}
})
}
}
}
})
You need module called ngSanitize take a look on angular docs here
https://docs.angularjs.org/api/ngSanitize
After installing this .You can use $sce service like this
var cleanHtml = $sce.trustAsHtml(html);
It will solve sanitizer errors.Also do not forget to inject it into direcitve.
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) {
...
}],
...