I have the following directive:
offerListSorters.directive('offersSorter', ['myState', '$templateCache', function (myState, $templateCache){
return {
scope: {},
controller: function($scope, $element, $attrs, $transclude) {
[...]
},
restrict: 'E',
//templateUrl: 'partials/offersSorterDirective.html',
template: $templateCache.get('partials/offersSorterDirective.html'),
replace: true,
transclude: true
};
}]);
And I use Karma + Jasmine to test this code and it works. But now if I switch to the templateUrl (currently commented out), it doesn't work. I've created a simple Plunker to show this issue. When you compare sorter and bsorter directives, it looks as if the isolateScope() call on the compiled element breaks when I use templateUrl instead of template. Any ideas?
It's the weirdest thing, I think this is actually a bug where if you're using a templateUrl, you don't get an isolated scope. The template itself is loaded correctly, but the scope is never loaded. I've updated the plnkr with some additional logging, checkout out the console and you'll see what I mean, bsorter doesn't get the ng-isolate-scope class and the scope is returned as undefined.
Edit:
I've updated the plnkr further to log a console message when the compile function is called. This is pretty much the limit of my javascript/angularJS knowledge, but the bsorter compile function is logged as being called after the scope should be returned, unlike the sorter compile function which is called before.
You should call isolateScope() in the it() function, not in beforeEach().
describe("Testing...", function(){
var element, isoScope;
beforeEach(function(){
module("myApp");
inject(function($rootScope, $compile){
var scope = $rootScope.$new();
element = $compile(angular.element("<sorter></sorter>"))(scope);
// isoScope = element.isolateScope(); <- Move from here
$rootScope.$digest();
});
});
it("something...", function(){
isoScope = element.isolateScope(); // <- to here
expect(isoScope.someProp).toBe("someValue");
});
});
You have to call $rootScope.$digest() after creating the directive via $compile, then it should work (right now you're calling the $digest() on the on your variable parentScope with is a new scope created with $rootScope.$new())
Related
everybody. I am new to AngularJS and find it very interesting, but I am a bit unclear about the following situation.
app.controller("myCtrl", ['$scope', '$http', '$filter', function ($scope, http, filter)
{
$http({
method: CTHocUri,
url: 'get',
async: true,
}).then(function (response) {
$scope.CTH = response.data; //response.data=two Object
})
}])
app.directive("myCustom1",['$http', function ($compile,$http) {
return {
link: function (scope, element, attr) {
console.log(scope.CTH); // I can't get... scope.CTH=undefined
}
}])
I can't get value scope.CTH. ??
There is a VERY simple way to SEE what the issue is:
In your html, merely surround your directive with an ng-if conditional based on CTH:
<span ng-if="CTH">
<my-custom-1></my-custom-1>
</span>
That's it.
What this does is that your directive will only be born/instantiated when CTH is set to non-null/non-undefined, i.e. when $http returns asynchronously. With this, your code will work. As such, there is no need for watching or broadcasting for this type of simple serialization of asynchronous events when you can simply leverage Angular's built-in '$watch's.
NOTE 1: I do not know what your architecture is and am not suggesting what you need to do. I am merely showing you why your code won't work and how you have been caught in a simple asynchronicity trap.
NOTE 2: I assume your directive is 'as -is'. In other words you have access to the parent's scope (i.e. the controller's scope). If your directive's scope were isolated (i.e. you had a scope:{..(attrs)..} defined in the directive) you will not have 'simple' access to the parent scope. Your code will be different--eg you can pass bits and pieces of your scope to the directive attrs. However, the ng-if will still work since it is on the controller's scope.
I hope this helps.
The directive and the controller are two completely different entities. If it helps you can think of them as different classes. They will not share the same scope.
You could create an isolated scope on the directive and pass the CTH variable into it. Conceptually something like this:
app.directive("myCustom1",['$http', function ($compile,$http) {
return {
scope { cth : "=" },
link: function (scope, element, attr) {
console.log(scope.cth);
}
Then in your HTML, do something like this:
<div ng-controller="myCtrl">
<my-Custom1 cth="CTH">
</div>
when the directive initializes, the scope.CTH is still not initialized since its initialization accurses inside an $http call.
one way to overcome this is to broadcast and event from the controller and catch it from inside the directive. see this plnkr and angularjs scope's docs
app.controller('MainCtrl', function($scope, $timeout) {
$scope.name = 'World';
$timeout(function() {
$scope.test = "test";
$scope.$broadcast('MyEvent')
}, 500);
});
app.directive('test', function() {
return {
link: function(scope, elm, attr) {
scope.$on('MyEvent', function() {
console.log(scope.test);
})
}
}
})
I have a directive with require property:
require: '^testBox'
now I want to get testBox controller inside controller of my directive. How should I do it?
I was trying to do so:
controller: function(){
this.testBox.user
}
but looks like it does not work.
It's clear for me how to get required controller inside link function. But is there a way to get it inside controller without using link?
Code on plunker.
This is still an open issue. So at the moment you can not just inject the required controller into your directive controller. I have updated your Plunker. It's definitely a bit hacky but the problem is; You cannot expose the TextBoxCtrl to the UserCtrl in either the pre or post link function because the controller gets executed first. So my idea is to use a watcher to observe a scope varibale called textBox. Once the value is defined I declare a variable on the UserCtrl and remove the watcher. Now you can simply use it in your template like so:
{{ user.textBox.name }}
Here is the code for the link function and the controller of the user directive:
link: function($scope, $element, $attrs, ctrl) {
$scope.textBox = ctrl
},
controller: function($scope) {
var vm = this;
var watcher = $scope.$watch('textBox', function(newVal) {
if(newVal) {
vm.textBox = newVal;
watcher();
}
});
}
However, you can also go with a link function instead. The required controller will be injected as the fourth parameter.
When you use controllerAs it's just added as a property of the underlying scope object (using the name you've defined). Knowing this, you can attach the parent controller instance as a property of your child controller instance as follows:
function exampleDirective() {
return {
require: '^testBox',
link: function (scope, element, attrs, testBox) {
scope.example.testBox = testBox;
},
controllerAs: 'example',
controller: function() {
// silly example, but you get the idea!
this.user = this.testBox.user;
}
}
};
I have a simple directive with an isolated scope that I'm trying to test. The problem is that I cannot test the scope variables defined in the link function. A watered down sample of my directive and spec below.
Directive:
angular.module('myApp').directive('myDirective', [function(){
return {
scope: {},
restrict: 'AE',
replace: 'true',
templateUrl: 'template.html',
link: function link(scope, element, attrs){
scope.screens = [
'Screen_1.jpg',
'Screen_2.jpg',
'Screen_3.jpg',
];
}
};
}]);
Spec
describe.only('myDirective', function(){
var $scope, $compile;
beforeEach(module('myApp'));
beforeEach(inject(function(_$rootScope_, _$compile_, $httpBackend){
$scope = _$rootScope_.$new();
$compile = _$compile_;
$httpBackend.when('GET', 'template.html').respond();
}));
function create(html) {
var elem, compiledElem;
elem = angular.element(html);
compiledElem = $compile(elem)($scope);
$scope.$digest();
return compiledElem;
};
it('should have an isolated scope', function(){
var element = create('<my-directive></my-directive>');
expect(element.isolateScope()).to.be.exist;
});
});
According to what I've been reading online, this should be working. So after hours of research>fail>repeat I'm leaning to think that it's a bug or a problem with my source code versions. Any ideas?
NOTE I'm testing with Angular 1.2.17, jQuery 1.11.0, Karma ~0.8.3, and latest Mocha
UPDATE 9/19
I updated my directive above, for simplicity's sake I had written down an inline template, but my actual code has an external templateUrl. I also added an $httpBackend.when() to my test to prevent the test from actually trying to get the html file.
I noticed that inlining the template makes everything work fine, but when I use an external template it doesn't fire off the link function.
UPDATE 9/19
I integrated html2js, and now I am able to actually load up the templates from cache and trigger the link function. Unfortunately, isolateScope() is still coming up undefined.
For anyone with the same issue as me, below is the solution.
In MOCHA, if you're using external html templates for you directives, you must use the ng-html2js preprocessor which will cache all your templates in a js file. Once you have this setup, karma will read these instead of trying to fetch the actual html file (this will prevent the UNEXPECTED REQUEST: GET(somepath.html) error).
After this is properly set up. You directive link function or controller scope will be available to your test via isolateScope(). Below is the updated code:
Spec
describe('myDirective', function(){
var $scope, $compile;
beforeEach(module('myApp'));
beforeEach(module('ngMockE2E')); // You need to declare the ngMockE2E module
beforeEach(module('templates')); // This is the moduleName you define in the karma.conf.js for ngHtml2JsPreprocessor
beforeEach(inject(function(_$rootScope_, _$compile_){
$scope = _$rootScope_.$new();
$compile = _$compile_;
}));
function create(html) {
var compiledElem,
elem = angular.element(html);
compiledElem = $compile(elem)($scope);
$scope.$digest();
return compiledElem;
};
it('should have an isolated scope', function(){
var elm = create('<my-directive></my-directive>');
expect(elm.isolateScope()).to.be.defined;
});
});
NOTE I ran into issues where I still got the UNEXPECTED REQUEST: GET... error after I thought I had everything set up correctly, and it turned out that my cached files had a different path than the actual file being requested, look at this post for more help:
Karma 'Unexpected Request' when testing angular directive, even with ng-html2js
I have a webpage written in angular with an ngCloak directive. It is loaded in a dynamically sized iframe with pym.js.
The trouble is that the page does not appear unless I resize the browser or trigger a resize event, or call pymChild.sendHeight() after the page loads.
I don't see any events associated with ngCloak though. Is there an angular event for "page is rendered, controllers are initialized"?
There is the $timeout service:
$timeout(function() {
// this code will execute after the render phase
});
You could write a directive that execute a callback in postLink function, since the postLink will be called last in the $compile life cycle.
.directive('onInitialized', function ($parse) {
return {
restrict: 'A',
priority: 1000, // to ensure that the postLink run last.
link: function postLink(scope, element, attrs) {
$parse(attrs.onInitialized)(scope);
}
}
});
and place it at the element that you would like to know when it and all its template-ready decendants have got compiled, for example:
<body ng-controller="MainCtrl" on-initialized="hello()">
and in the MainCtrl controller:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hello = function () {
console.log('Hello ' + $scope.name);
};
})
For template-ready, I mean all directives except: directives with templateUrl and the template haven't ready in the $templateCache yet, since they will get compiled asynchronously.
Hope this helps.
I'm still new in Angular but i'm doing some progress.. i think :)
I have problem passing json file from controller to directive using isolated scope.
This is my controller which talk to factory "dataArchive":
.controller('graphCtrl', ['$scope', 'dataArchive', function($scope, dataArchive){
dataArchive.get().then(function(data){
$scope.getData = data;
});
}]);
Then i have directive which is using isolated scope.
.directive('dataGraph', function($compile){
return {
restrict: 'AE',
replace: true,
scope: {
getArchiveData: '='
},
template: '<div id="chartdiv"></div>',
link: function (scope, element, attrs){
var dati = scope.getArchiveData;
console.log(dati);
};
};
});
And this is my HTML:
<div ng-controller="graphCtrl">
<data-graph get-archive-data="getData"></data-graph>
</div>
In console i always get 'undefined'.
Where i am wrong and is this a good way?
Thanks you all.
Since this code is async:
dataArchive.get().then(function(data){
$scope.getData = data;
});
The link function will run before the data is set on getData, and therefore the isolated scope variable will not be set at this time. So, I believe you are seeing a timing issue.
To make sure that your directive binding is correct. Try to set $scope.getData to a static value (e.g. $scope.getData = [{ data: 'value'}]). This should work.
Also, Angular checks for changes (to rebind) based on object reference. So, you might need to define $scope.getData in the controller (outside of the async call). Then you might want to push all the data in (instead of replace the entire object with the assignment).
Hope this helps.