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.
Related
In IE9 my angular routing does not work and it redirects me to whatever was before the '#' hashtag.
mysite.com/#/info -> mysite.com
even if i manually removes the /# from the URL and try again, i still get redirected.
It appends '#' to my URL because html5 mode uses History API when the browser supports it, and falls back to 'hashbang' (#) when it is not supported(like IE9).
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("/");
$stateProvider
.state('statistics', {
url: "/path/:myId",
templateUrl: '../some/path/site.html',
controller: 'Ctrl'
}
);
been looking at various solutions such as:
AngularJS How to remove # symbol in IE9 by using route
https://gist.github.com/thomseddon/3834721
but neither of them are working for me.
I'm looking for a solution without having to deactivate html5mode. Anyone experienced similar issue and managed to fix?
In HTML5 mode, there are three situations in which the A tag is not rewritten: from the angular docs -
1 Links that contain a target attribute. Example: link
2 Absolute links that point to a different domain Example: link
3 Links starting with '/' that lead to a different base path when base is defined Example: link
You can try to use a global directive like this that add target='_self' to all all links without target.
myApp.directive('a', [function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
if (!attrs['target']) {
element.attr('target', '_self');
}
}
}
}]);
I am following the angular-meteor tutorial at: http://www.angular-meteor.com/tutorials/socially/angular1/routing-and-multiple-views
I understand most of the routing, but I do not see where all the parts tie together. So here's my thought process.
I the routes, I notice the :partyId.
.state('parties', {
url: '/parties',
template: '<parties-list></parties-list>'
})
.state('partyDetails', {
url: '/parties/:partyId',
template: '<party-details></party-details>'
});
And in < parties-list >, I can see "this.partyId = $stateParams.partyId" being defined. #1. How is :partyId and $stateParams.partyId related? #2. The directive is called "partyDetails" whereas the template is < party-details >... is this an implied name given by Angular?
angular.module('socially').directive('partyDetails', function () {
return {
restrict: 'E',
templateUrl: 'party-details.html',
controllerAs: 'partyDetails',
controller: function ($scope, $stateParams) {
this.partyId = $stateParams.partyId;
}
}
});
Next... inside the party-list.html page (NOT party-details.html), there is a ui-sref link:
<li ui-sref="partyDetails({ partyId: party._id })" ng-repeat="party in partiesList.parties">
{{party.name}}
<p>{{party.description}}</p>
<button ng-click="partiesList.removeParty(party)">X</button>
</li>
But in the < party-list > directive there is no mention of any variable or function called "partyDetails". #3.What is the ui-sref referencing? How does it compare to "< a href="/parties/{{party._id}}" >" that is used further in the tutorial.
#4. Finally, is there anything that I should know about Meteor or Angular UI.Router in regards to things that are implied/abstracted away?
Thank you for your time! :)
It's same. If you declare parameters in query string like :partyId, you will received an object stateParams with keys are these parameters and values are proportional string in your segment of url.
It's coding conversation of Angular Js. You can check it out for more example.
https://docs.angularjs.org/guide/directive
Not problem if you use correct anywhere. But what is happened if you want change link or url structure? Example: href="/home" appear more than 20 html pages. And you want change all to "/homepage". Why???. With router, you need only change url state in the router.js file. Ok?
Angular-meteor is one of ways help you build your apps with angular. So everything related angular, you can find separate. Example you can read about angular ui router or all package of angularui in this link https://angular-ui.github.io
I'm creating an angularJs application in MVC 5. I've created a directive as given below.
app.directive('clusterButton', function () {
return {
restrict: 'E',
scope: {
clusterInfo: '=info'
},
templateUrl: function(elem, attr){
return 'ClusterButtonTemplate';
}
};
});
I have .cshtml file named ClusterButtonTemplate.cshtml and I created a partial view method in the controller class to return this view. So the angular js directive is binding the template.
I need to remove the method in mvc controller class and need to refer the template file directly. I don't want to use a cshtml file. I need a html file for template. I have created a ClusterButtonTemplate.html file. But while setting the template as below the browser shows a 404 error.
app.directive('clusterButton', function () {
return {
restrict: 'E',
scope: {
clusterInfo: '=info'
},
templateUrl: function(elem, attr){
return 'ClusterButtonTemplate.html';
}
};
});
I didn't use angular js routing in my project. Everything is managed using the MVC routing. How can I fix this issue. Do I need to use Angular routing and MVC routing?
You'll need to put in in a place where MVC will not try to map the URL to a controller. By default, the /Content folder is ignored, so you could create a folder under it called "Templates" and use that for the URL.
templateUrl: function(elem, attr){
return '/Content/Templates/ClusterButtonTemplate.html';
You may try to use a leading slash since it's loaded using a relative path.
templateUrl: function(elem, attr){
return '/ClusterButtonTemplate.html';
}
That's very simple! Just put an html file template (as content) in the folder that you prefer (ie. app/phone-list/ in project root) then assign
templateUrl: '/app/phone-list/phone-list.template.html'
to controller templateUrl property.
Avoid the views, model or controller folders...
I want to show a laravel blade view file in angular JS directive by
var commentsApp = angular.module('CommentApp',[]);
commentsApp.directive('commentForm',function(){
return {
restrict: 'EA',
replace: 'true'
templateURL: 'views/comments/comment-form.blade.php'
}
});
I want to use it by angular directive instead of
#include('comments.comment-form')
Where is my problem? How to solve this.
Thank you.
First you must define a route in laravel
Route::get('comment-form', function() {
return view('comments.comment-form');
});
Then you can use it in AngularJS
var commentsApp = angular.module('CommentApp', []);
commentsApp.directive('commentForm', function() {
return {
restrict: 'EA',
replace: 'true',
templateURL: 'comment-form'
}
});
Answer above is a good idea, however i dont like the idea of asking for a template by routing, We would create a route for each component :c . I leave my solution here:
In gulpfile.js inside elixir function add this line:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.copy('resources/assets/js/angular/components/**/*.template.html', public/angular-templates');
//Find all files with suffix .template.html
});
As you notice it, i created a folder called 'angular' and then another one called 'components', there we will have our components
Angular-----------------------------
--Components------------------------
----my-component.directive.js-------
----my-component.template.html------
We have to create a global angular variable taking our browser window origin (www.myapp.com, localhost:8000, etc) by doing:
angular.module('myModule',[])
.value('pathAssets', location.origin + '/angular-templates/')
In our templateUrl we will call the template by writting:
templateUrl: pathAssets + '../angular-templates/my-template.html',
I have to say we have to concat our angular files in a file, otherwise it won't work D: if you don't know how to do it, add these lines in your gulpfile.js
mix.scripts([
'../../../bower_components/angular/angular.min.js',
'angular/app.js',
'angular/controllers/**/*.controller.js',
'angular/components/**/*.directive.js',
'angular/bootstrap.js',
], 'public/js/app.js'); //We concatenate angular files saving them in app.js
Finally execute the command 'gulp' in terminal(In our project), it should generate a new folder in public called angular-templates.
That's it :)
(function(angular) {
'use strict';
angular.module('app').component('bringTeamToEvent', {
templateUrl: '/assets/ng/app/team/bringTeamToEvent.html',
bindings: {
hero: '='
}
});
})(window.angular);
Just work from the public directory, no need to compile assets and move if you dont need to.
Then add the # symbol to tell blade to ignore and let angular do its work within the template
<span>Name: #{{ $ctrl.hero.name}}</span>
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.