I have a directive and a controller according to this (it's from the Angular JS Directives PacktPub book, mostly).
angular.module('myApp',[])
.directive('myIsolatedScopedDirective', function(){
return {
scope : {
'title' : '#msdTitle'
},
link: function ($scope, $element, $attrs) {
$scope.setDirectiveTitle = function (title) {
$scope.title = title;
};
}
};
})
.controller('MyCtrl', function($scope){
$scope.title = "Hello World";
$scope.setAppTitle = function(title){
$scope.title = title;
};
});
<div ng-controller="MyCtrl">
<h2>{{title}}</h2>
<button ng-click="setAppTitle('App 2.0')">Upgrade me!</button>
<div my-isolated-scoped-directive msd-title="I'm a directive within the app {{title}}">
<h4>{{title}}</h4>
<button ng-click="setDirectiveTitle('bob')">Bob it!</button>
</div>
</div>
The problem is the following:
Why the <h4>{{title}}</h4> evaluate to "Hello World" and why not "I'm a directive within the app Hello World"?
Can anybody explain this please?
Thank you.
Plunker
The reason is, you have to enter the template inside directive's template property to make it the isolated one. Right now, the directive creates an isolated scope, but it doesn't use it anywhere, because the content inside your directive tag is already evaluated in the parent scope (of MyCtrl) when the directive's link function is triggered
This is probably what to want to do
http://plnkr.co/edit/jmWrNpLFttDPhSooPF0M?p=preview
directive
.directive('myIsolatedScopedDirective', function(){
return {
scope : {
'title' : '#msdTitle'
},
replace: true,
template: '<div><h4>{{title}}</h4>' +
'<button ng-click="setDirectiveTitle(\'bob\')">Bob it!</button>',
link: function ($scope, $element, $attrs) {
$scope.setDirectiveTitle = function (title) {
$scope.title = title;
};
}
};
markup
<div my-isolated-scoped-directive msd-title="I'm a directive within the app {{title}}"></div>
Related
Im new to angular js and im not able to figure out how to change the child controller scope variable from parent controller. Here is the code snippet for that:
var mainApp = angular.module("mainApp", []);
var parentCtrl = function($rootScope, $scope, shareService, $log){
shareService.setDetails($scope.pdetails);
}
var mainCtrl1 = function($rootScope, $scope, shareService, $log){
$scope.msg = "Controller 1";
$scope.details = shareService.details;//shareService.details;
}
var mainCtrl2 = function($rootScope, $scope, shareService){
$scope.msg = "Controller 2";
$scope.details = shareService.details;//shareService.details;
}
parentCtrl.$inject = ["$rootScope", "$scope", "shareService", "$log"];
mainCtrl1.$inject = ["$rootScope", "$scope", "shareService", "$log"];
mainCtrl2.$inject = ["$rootScope", "$scope", "shareService", "$log"];
mainApp.controller("parentController", parentCtrl)
.controller("mainController1", mainCtrl1)
.controller("mainController2", mainCtrl2)
.factory("shareService", function(){
var shareData = {
details : "sadfgs detaisdfadsfasdf..",
setDetails: function(value){
this.details = value;
}
};
return shareData;
});
<html>
<head>
<title>Angular JS Views</title>
<script src='lib/angular.js'></script>
<script src='js/mainApp.js'></script>
<script src='js/studentController.js'></script>
</head>
<body ng-app = 'mainApp' ng-controller='parentController' ng-strict-di>
<div ng-controller='mainController1'>
1. Msg : {{msg}}<br/>
Share Details: {{details}}<br/><br/>
</div>
<div ng-controller='mainController2'>
2. Msg : {{msg}}<br/>
Share Details: {{details}}<br/><br/>
</div>
<input type='text' ng-model='pdetails'/>
</body>
</html>
Here is the Plunker link:
https://plnkr.co/edit/hJypukqMmdHSEZMVnkDO?p=preview
In order to change value of child controller from parent controller you can use $broadcast on $scope.
syntax
$scope.$broadcast(event,data);
$broadcast is used to trigger an event(with data) to the child scope from current scope.
In child controller use $on to receive the event(with data).
Here id the code snippet:
app.controller("parentCtrl",function($scope){
$scope.OnClick=function()
{
$scope.$broadcast("senddownward",$scope.messege);
}
});
app.controller("childCtrl",function($scope){
$scope.$on("senddownward",function(event,data)
{
$scope.messege=data;
});
});
In this example I am broadcasting the event on ng-click,you can use some other custom event.like $watch on $scope.
See this example
https://plnkr.co/edit/efZ9wYS2pukE0v4JsNCC?p=preview
P.S. you can change the name of event from senddownward to whatever you want
You can access the parent's scope properties directly due to the scope inheritance:
<div ng-controller='mainController1'>
Share Details: {{pdetails}}
</div>
Your example does not work because the controllers get executed only once before the view is rendered, pdetails is empty at that moment.
To monitor the changes to pdetails, you can use $watch in the child controller:
$scope.$watch('pdetails', function(newVal) {
$scope.details = newVal;
});
How can I access isolated scope's property in directive tag?
Simplified example:
angular.module('app', [])
.controller('myController', function() {
var result_el = document.getElementById("result");
this.log = function(text) {
var p = document.createElement("p");
p.innerHTML = text;
result_el.appendChild(p);
}
})
.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
'click_fn': '&myClick'
},
template: '<span ng-click="click_fn()">Click me!</span>',
link: function(scope, element) {
scope.my_prop = 'text property';
}
}
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="myController as mCtrl">
<my-directive my-click="mCtrl.log(my_prop)"></my-directive>
</div>
<div id="result"></div>
In this example I need to get my_prop property from directive's scope. Is it possible to do this somehow?
The directive definition object for isolate scope (DDO)should be as below
scope: {
click_fn: '&myClick' // click_fn should not be string
},
In directive template , need to pass parameter in object literal (aliasing)as below
Directive template
template: '<span ng-click="click_fn({my_prop:my_prop})">Click me!</span>'
Plunker
I am creating a directive which will take the arguments passed to it from html and populate the fields in the template. The code for directive is like below.
(function(){
angular.module("MyApp",{})
.directive("myDirective",function(){
var MyLink = function(scope,element,attr){
scope.title = attr.title;
}
return{
restrict : 'EA',
transclude:true,
templateUrl:"directive.html",
link:MyLink
}
});
}())
The directive.html is like
<div >
<span data-ng-bind="title"></span>
</div>
The main page is like
<div ng-app="IndexApp" ng-controller="IndexController">
<my-directive title="hello"></my-directive>
this is a test
</div>
My issue is that why is hello not getting displayed ?
Link to plunker is here
Your module declaration was wrong, you were using {} instead of []. If you also wanted to declare the directive in another module then you need to add the dependency to your indexApp (I've done so in this plunker).
http://plnkr.co/edit/s02VmgFfWhstmVhVVrUa?p=preview
index.js
(function(){
angular.module("IndexApp",['myDirectives'])
.controller("IndexController",function($scope){
$scope.title = "this is to test";
});
}())
directive.js
(function(){
angular.module("myDirectives", [])
.directive("myDirective",function(){
var MyLink = function(scope,element,attr){
scope.title = attr.title;
}
return{
restrict : 'EA',
templateUrl:"directive.html",
link:MyLink
}
});
}())
The examples I see of using angular-ui/bootstrap's $modal always look something like this:
$modal.open({
templateUrl: 'modaltemplate.html',
controller: function($scope) {
...
}
});
What if I want to use a directive, instead? Like this:
$modal.open({
template: '<my-modal-directive></my-modal-directive>'
// no "controller" property; use directive's controller
});
The markup for my-modal-directive renders fine, and I've moved the controller property into the my-modal-directive definition object, but now getting this error from the my-modal-directive:
Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
Can anyone point me to an example where $modal uses a directive where that directive defines the controller?
For example, this works, where I've replaced the templateUrl with a directive:
http://plnkr.co/edit/YrGaF83GH6bzZPRR55GK?p=preview
But when I move the controller from $modal.open() into the directive, that's when the error happens:
http://plnkr.co/edit/aLBT239EpL004DRh4jll?p=preview
The problem is that $modalInstance can only be injected in the controller that you provide to $modal.open.
Check out the sources here:
$modal.open = function (modalOptions) {
...
var modalInstance = {
...
};
...
if (modalOptions.controller) {
...
ctrlLocals.$modalInstance = modalInstance;
...
ctrlInstance = $controller(modalOptions.controller, ctrlLocals);
...
}
...
}
In essence when you try to add $modalInstance as a dependency to your controller AngularJS looks for a registered global provider named $modalInstanceProvider. Now the trouble is, if you understood the code above, that $modalInstance is not a globally registered provider. It only "exists" as a dependency for the controller you pass to $modal.open.
If you read the rest of the code you'll notice that $modal.open returns modalInstance, maybe you can use that.
Something like this:
function SomeController($modal) {
$scope.modal = {
instance: null
};
$scope.modal.instance = $modal.open({
template: '<my-modal-directive modal="modal"></my-modal-directive>',
scope: $scope
});
}
function MyModalDirective() {
scope: {
modal: '='
},
link: function($scope) {
// here you can access $scope.modal.instance
}
}
The issue you have is that you are trying to inject values which are not available for injection. Only values registered with the injector can be injected.
The logic of you code is also flawed, you are creating the modal in your main controller but trying to close it in the directive. Ideally, the modal should be triggered by the directive (via it's link function), and then you can ok/cancel it from there.
See my http://plnkr.co/edit/3p1rXAymd7BilyklgxKy?p=preview for one possible approach, I have kept the code that closes and cancels the modal in the main controller.
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('myModal', function() {
return {
restrict: 'E',
templateUrl: 'myModalContent.html',
controller: function ($scope) {
$scope.selected = {
item: $scope.items[0]
};
}
};
});
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance;
var modalScope = $scope.$new();
modalScope.ok = function () {
modalInstance.close(modalScope.selected);
};
modalScope.cancel = function () {
modalInstance.dismiss('cancel');
};
modalInstance = $modal.open({
template: '<my-modal></my-modal>',
size: size,
scope: modalScope
}
);
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
I create a directive to create modals easily. A modal content is based on a template view.
angular.module('your_app').directive('modalViewUrl', function ($modal) {
return {
restrict: 'A', // A: attribute
scope: { // isolate scope
'modalViewUrl': '#', // modal view url to render the modal content
'modalController': '#' // modal view controller (optional)
},
link: function($scope, element, attrs){
element.bind('click', function(){
var template =
'<div class="modal-body">' +
'<button ng-click="$close()" type="button" class="close" aria-label="Close">' +
'<span aria-hidden="true">×</span>' +
'</button>' +
'<div ng-include="\'' + $scope.modalViewUrl + '\'"></div>' +
'</div>';
// see modal reference from ui bootstrap at <http://angular-ui.github.io>
var modalInstance = $modal.open({
animation: true,
template: template,
controller: $scope.modalController,
});
});
}
};
});
Example how to use it:
index.html
<a modal-view-url="hello.html" modal-controller="HelloCtrl" href="#">
Click here to open the modal
</a>
hello.html
<h1> Hello World {{name}} </h1>
HelloCtrl.js
angular.module('yourApp').controller('HelloCtrl',
function ($scope, $modalInstance) {
// $modalInstance: same from from ui bootstrap
$scope.name = "Xico";
});
A modal view can have its own controller. Example:
hello.html (modified)
<h1 ng-controller="Hello2Ctrl"> {{msg}} {{name}} </h1>
Hello2Ctrl.js
angular.module('yourApp').controller('Hello2Ctrl',
function ($scope) {
$scope.msg = "Hello Worldsszz";
$scope.name = "Zefa";
});
Observe that the modal output will be "Hello Worldsszz Xico", because the modal controller (HelloCtrl) will be rendered after view controller (Hello2).
Reference
It's even more late reply, but someone may find it useful.
I have enhanced Fernando Felix answer and made my own quite flexible directive which communicates with the controller, which I think might be solution for this question.
Directive
var modalUrl = function ($modal) {
return {
restrict: 'A', // A: attribute
scope: { // isolate scope
'modalUrl': '#', // modal view url to render the modal content
'modalController': '#', // modal view controller (optional)
'value': "="
},
link: function(scope, element, attrs){
console.log('modalUrl link');
var modalInstance;
var template = [
'<div class="modal-body">',
'<button ng-click="$close()" type="button" class="close" aria-label="Close">',
'<span aria-hidden="true">×</span>',
'</button>',
'<div ng-include="\'' + scope.modalUrl + '\'"></div>',
'</div>'
].join('');
element.bind('click', function(){
// see modal reference from ui bootstrap at <http://angular-ui.github.io>
modalInstance = $modal.open({
size: attrs.size,
animation: true,
template: template,
resolve: {
params: function () {
console.log('value passed to modal:');
console.log(scope.value);
return scope.value;
}
},
controller: scope.modalController
});
modalInstance.result.then(
function (returnValue) {
// alert('value: '+returnValue);
console.log('modal returnValue:');
console.log(returnValue);
scope.value = returnValue;
}, function () {
console.log('Modal dismissed at: ' + new Date());
}
);
});
}
};
}
modalUrl.$inject = ['$modal'];
angular.module('app').directive('modalUrl', modalUrl);
Controller
var HelloCtrl = function ($scope, $modalInstance, modalVal) {
// $modalInstance: same from from ui bootstrap
console.log('Hello init!');
// modalVal is the init modal value passed via directive
console.log(modalVal);
// your code
$scope.name = modalVal;
$scope.ok = function() {
$modalInstance.close(this.name); // returnValue
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
HelloCtrl.$inject = ['$scope', '$modalInstance','params'];
angular.module('app').controller('HelloCtrl',HelloCtrl);
inline template
<script type="text/ng-template" id="hello.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" ng-model="name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</script>
It's one controller and template per popup type, then you can call it multiple times with:
<a modal-url="hello.html" modal-controller="HelloCtrl" value="yourVal" ng-init="yourVal='test'" href="#">Click here to open the modal</a>
You can initialize value with whatever - ie. object, array etc.
or external template
Pretty much the same, just url changes and template file is used for template.
<a modal-url="/modal/test1.html" modal-controller="HelloCtrl" value="yourVal" ng-init="yourVal='test'" href="#">Click here to open the modal</a>
test1.html
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" ng-model="name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
Modal size etc.
Just add parameter size="sm|lg" for the modal link/button ie.
Click here to open the modal
For standard size skip the parameter.
You may enhance it yourself using link function attrs.
I'm kanda late replay put simplest way is to use
$scope.$parent.$close(result);
$scope.$parent.$dismiss(reason);
This works form your directive controller.
jsfiddle
I have a ng-click within a directive named ball. I am trying to call MainCtrl's function test() and alert the value of ng-repeat's alignment of ball.
Why cant i recognize the MainCtrl's test function?
var $scope;
var app = angular.module('miniapp', []);
app.controller('MainCtrl', function($scope) {
$scope.project = {"name":"sup"};
$scope.test = function(value) {
alert(value);
}
$scope.test2 = function(value) {
alert('yo'+value);
}
}).directive('ball', function () {
return {
restrict:'E',
scope: {
'test': '&test'
},
template: '<div class="alignment-box" ng-repeat="alignment in [0,1,2,3,4]" ng-click="test(alignment)" val="{{alignment}}">{{alignment}}</div>'
};
});
html
<div ng-app="miniapp">
<div ng-controller="MainCtrl">
{{project}}
<ball></ball>
</div>
</div>
You need to pass the test() method from the controller into the directive...
<div ng-app="miniapp">
<div ng-controller="MainCtrl">
{{project}}
<ball test="test"></ball>
</div>
</div>
Change & to = in directive:
scope: {
'test': '=test'
}
Fiddle: http://jsfiddle.net/89AYX/49/
You just need to set the controller in your directive as:
controller: 'MainCtrl'
so the code for your directive should look like:
return {
restrict:'E',
scope: {
'test': '&test'
},
template: '<div class="alignment-box" ng-repeat="alignment in [0,1,2,3,4]" ng-click="test(alignment)" val="{{alignment}}">{{alignment}}</div>',
controller: 'MainCtrl'
};
the one way is to not isolate a directive scope...just remove the scope object from directive.
Another way is to implement an angular service and put a common method there, inject this service wherever you need it and in the directive call function that will be insight isolated scope and there call a function from directive