I am new to AngularJs and struck with an issue. I have "index.html" where I need to have the main section loaded via the <div data-ng-view=""></div>. Now, the data inside the view will be populated by the controller using the below code
.when('/',
{
controller:'controllers.IndexCtrl',
templateUrl:'/partials/index-partial.html'
})
Inside the index-partial.html file I have used the custom directive linke below:
<custom-carousel/>
The code for the carousel is below:
myApp.directive('customCarousel', function() {
return {
restrict: 'E',
replace:'true',
templateUrl: "/partials/carousel.html",
link: function(scope, element, attrs) {
$('.my-list').click(function(){
$('.my-list').removeClass('active');
$(this).addClass('active');
});
}
};
});
The issue with the above approach is that the jquery code inside the directive gets called twice and hence the toggling of the selected li does not work.
I have below questions:
Is the jquery function inside the directive called twice because its called from the partial and once again during the ng-view?
Whats the reccommended way of handling this scenarios?
Whats the best approach to fix this issue. If I remove the templateUrl from the controller and directly use the custom-carousel inside the html, this works perfectly but I want to load the directive using the ng-view and not directly in the index.html file.
Please let me know the best approach to solve this issue.
Related
I'm having problems with angular directives. I created a custom directive but it's not appearing and i don't know why. I can access the view specified in templateUrl with using localhost.
If somebody could help me that would just be great.
Thanks.
messageListDirective.js
angular.module('neat')
.directive('message-list', function() {
return {
restrict: 'E',
templateUrl: '/views/utils/messageList.html'
}
});
messageList.html
<h4>MESSAGE LIST</h4>
And the view where I'm using the directive:
messageBoard.html
<message-list></message-list>
change directive:
.directive('message-list', function() {
to
.directive('messageList', function() {
angular normalize element tags. Read this for more info
Did you import ng-controller="neat" in your messageBoard.html ?
If yes I think you should check the url to template.
I'm working with a directive.
Here is simple format of my directive:
angular.module('app',[]).directive('companylookup', CompanyLookupDirective);
function CompanyLookupDirective() {
return {
templateUrl: '<input id="foo"/>',
controller: 'CompanyLookupController',
controllerAs: 'vm'
}
}
I want to find input element with jquery in my controller (CompanyLookupController.js) like this:
var foo = $('#foo');
// decorate foo element using igniteui lib
$('#foo').igCombo({ datasource: ...});
But $('#foo') always return null. I can try to delay finding element with $timeout service to wait until element exist. But I don't want to do this so much times in my app in concern of performance.
Is there any way we can reference template elements in angularjs from a controller?
in template URL use escape character before quotes ,
templateUrl: '<input id=\"foo\"></input>'
Also i agree with #Robert Goldwein and if you absolutely have to, use link to manipulate DOM
EDIT : Help on link and compile functions.
I have a custom directive I have created that loads a template into a modal window. The modal window is a template itself and is able to run my custom directive without issues. That template that is loaded into the modal contains another directive which creates a select list using angular-selectize. Here is my directive:
var dynamicTemplate = function($templateRequest, $compile) {
return {
restrict: "E",
link: function(scope, element, attrs) {
var modalOptions = JSON.parse(attrs.modalOptions);
$templateRequest(modalOptions.Url).then(function(html) {
$elem = $compile(html)(scope);
element.append($elem);
});
}
}
}
The HTML is getting loaded correctly, but the selectize directive is not initializing .
I have also tired this inside the then method:
element.html(html)
$compile(element.contents())(scope);
That gave me the same result.
The issue I am having is I am receiving this message after the compilation of the HTML:
TypeError: element.selectize is not a function
Here is the plunk I am working with.
If you want angular.element to use jQuery you have to include jQuery in page before angular loads.
Demo works fine once you change script order
Updated demo
First solution
You have to include jQuery.js before Angular.js in index.html. This magic makes angular.element to use jQuery.
Solution 1
Second solution
You may replace element.selectize with $(element).selectize in angular-selectize.js on line 97. This makes angular-selectize script to use jQuery's selector instead of angular's.
Solution 2
Include jQuery in the page before Angular loads. Then angular.element will use jQuery.
I searched through many posts already, but still can't make run a very basic custom directive since the templateUrl is not resolved correctly.
I've got an AngularJSController with an Index - action (asp.net MVC), calling View/AngularJS/Index.cshtml, very basic. In there, I call a custom directive:
<product-title></product-title>
which is outlined liked that:
app.directive('productTitle', function () {
return {
restrict: 'E',
// ends up with wrong url '{root-path}/AngularJS/AngularJSTemplates/ProductTitle'
templateUrl: 'AngularJSTemplates/ProductTitle'
}
});
As you can see, it should call the controller AngularJSTemplatesController (asp.net MVC) with the action method ProductTitle. This will return my partial for angularJS. And here is the problem: AngularJS calls {root-path}/AngularJS/AngularJSTemplates/ProductTitle instead of {root-path}/AngularJSTemplates/ProductTitle...
What I am missing here? Do I really need to define the root-path somewhere as a javascript-global and use it for absolute paths?
You may need to define the base url, see the documentation on using Relative links here
just replace directive with follwing directive :
app.directive('productTitle', function () {
return {
restrict: 'E',
// ends up with wrong url '{root-path}/AngularJS/AngularJSTemplates/ProductTitle'
templateUrl: 'AngularJS/AngularJSTemplates/ProductTitle'
}
});
i think directive cant find your template. AngularJS/AngularJSTemplates/ProductTitle is the relative url for your template. i think it wil work.
I have an AngularJS application, which hasn't been using the built in routing before now. I am refactoring the site, so it will be a SPA.
To do this I have change the app to use ng-view to switch between the different pages, instead of just having the server serve the different controllers
After this is done my endless scroll suddenly stopped working.
I have a directive which looks like this:
directiveModule.directive('whenScrolled', ['$window', function($window) {
return function(scope, element, attr) {
var raw = element[0];
angular.element($window).bind('scroll', function() {
console.log('test');
scope.$apply(attr.whenScrolled);
});
};
}]);
But now the scroll event is never fired.
If I take angular.element($window).bind('scroll', function() {..}); out and uses it in the controller instead it works fine, but it just seems like a hack.
Is there any way to bind to the page scroll event inside a directive, which is inside a controller, which is inside a ng-view?
Are you sure the element with the directive which is inside the controller and then the ng-view is added to the DOM?
More code (A Fiddle) would help.