I am working with angular ui-bootstrap. Looking thorugh the ui-bootstrap-tpls.js file, i see this snippet
.directive('accordion', function () {
return {
restrict:'EA',
controller:'AccordionController',
transclude: true,
replace: false,
templateUrl: 'template/accordion/accordion.html'
};
})
Notice: templateUrl: 'template/accordion/accordion.html'.
Where is this file?? It is nowhere to be found on my computer? I assume its calling it from remote location, if so, how do i get it local so i can work on it? The greater question here is How to access ui-bootstrap built in directives so i can modify them to my liking?
that file is coming from the $templateCache. From Angular docs:
The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the
cache in a script tag, or by consuming the $templateCache service
directly.
Adding via the script tag:
This is the
content of the template Note: the script tag containing
the template does not need to be included in the head of the document,
but it must be a descendent of the $rootElement (IE, element with
ng-app attribute), otherwise the template will be ignored.
Here's an example:
angular.module('template/components/login.tpl.html', [])
.run(['$templateCache', function($templateCache){
$templateCache.put('template/components/login.tpl.html',
'<div class="row">' +
'<div class="col-md-4 col-md-offset-5 col-xs-12 col-xs-offset-2">' +
'<div>' +
'<label for="email">Email:</label>' +
'<input type="email" id="email" ng-model="user.username" class="required" name="email" autofocus />' +
'</div>' +
'<div>' +
'<label for="pwd">Password:</label>' +
'<input type="password" id="pwd" class="required" ng-model="user.password" name="pwd"/>' +
'</div>' +
'<p>' +
'<button id="login" class="btn btn-default" ng-click="onSubmit(user)">Login</button>' +
'</p>' +
'</div>' +
'</div>');
}]);
I would reference 'template/components/login.tpl.html' as my templateUrl
Related
bootstrap for angular and have this problem with $uibmodal it seems to load whole page not an template here is my code.
$uibModal.open({
template: [
'<div class="modal-content">',
'<div class="modal-header">',
'<h3 class="modal-title">Regulamin</h3>',
'</div>',
'<div class="modal-body">',
'$1. Give us all your money!',
'</div>',
'<div class="modal-footer">',
'<button class="btn btn-primary" ng-click="$dismiss()">OK</button>',
'</div>',
'</div>'
].join(''),
controller: function ($scope) {
}
});
all things are imported correcly.
I'm newbie-.- forgot to add ui-bootstrap-tpls.min.js
What i want to do is when i click for example on some button with binded function like this, it will create whole DOM element structure for private chat window purpose
$scope.openPrivateChatWindow = function () {
//here i want to do some coding to create whole div structure
}
With jQuery i will do something like this
function openPrivateChatWindow() {
var div = '<div id="' + ctrId + '" class="ui-widget-content draggable" rel="0">' +
<div class="header">' +
'<div style="float:right;">' +
'<img id="imgDelete" style="cursor:pointer;" src="/Images/delete.png"/>' +
'</div>' +
'<span class="selText" rel="0">' + userName + '</span>' +
'<span class="selText" id="msgTypeingName" rel="0"></span>' +
'</div>' +
'<div id="divMessage" class="messageArea">' +
'</div>' +
'<div class="buttonBar">' +
'<input id="txtPrivateMessage" class="msgText" type="text" />' +
'<input id="btnSendMessage" class="submitButton button" type="button" value="Send" />' +
'</div>' +
'<div id="scrollLength"></div>' +
'</div>';
}
is there something how i can archieve this using angular and if it is, what is the best way how to do that, for example if i can load some html template for that or do it like i showed right up here with jQuery
You should not add html nodes to the DOM from the within the controller.
Either use a custom directive or just hide your div using ng-if and make it appear on button click.
$scope.isChatHidden = true;
$scope.openPrivateChatWindow = function () {
$scope.isChatHidden = false;
}
<div ng:if="isChatHidden">
Other DOM Elements
</div>
I have a directive working without any issues when the HTML markup is written in the template section of the directive.
I've just moved the HTML markup in a .html file and on load of the page, i am seeing:
Error: [$parse:lexerr] http://errors.angularjs.org/1.3.14/$parse/lexerr?p0=Unexpected%20next%20character%20&p1=s%2016-16%20%5B%5C%5D&p2=option.name%20%3D%3D%3D%20%5C'choices%5C'
Original directive:
app.directive('myDirective', function () {
return {
restrict: 'E',
scope: {
data: "="
},
template: '<p>' +
'<div ng-repeat="select in data.output">' +
'<div ng-if= "select.name === \'choices\'">' +
'<p ng-repeat="choice in select.value"><label><input type="radio" ng-model="data.input[0].value" ng-value="$index" >{{choice}}</label></p>' +
'</div>' +
'</div>' +
'</p>'
}
}
);
New:
app.directive('myDirective', function () {
return {
restrict: 'E',
scope: {
data: "="
},
templateUrl: 'home/mydirective.html'
}
}
);
I page load i can see the http request for mydirective.html and the markup is correct, however the lexerr then appears in the console.
Your html should not contain concatenation that will mess while angular $compile that template. It should be plain html.
mydirective.html
<p>
<div ng-repeat="select in data.output">
<div ng-if="select.name === 'choices'">
<p ng-repeat="choice in select.value">
<label>
<input type="radio" ng-model="data.input[0].value" ng-value="$index">{{choice}}</label>
</p>
</div>
</div>
</p>
In my case this was related to using single quote with a backslash (\') in the .html-file. It was working well when the html was put directly inside the directive using template.
But it threw an error when it was put in a separate .html-file and using templateUrl. So changing ng-class="{\'something\'}" to ng-class="{'something'}" fixed it for me. Hope this will save someone else couple of hours.
I'm new to angularjs and i'm getting some troubles. Usually I find a way to fix it but not this time.
So the problem is I want to use an md-button as a link to another page. But, when I add an href, the button disappears from the page.
Here is my code:
home.html
<body ng-app="friend-s-app">
<div ng-controller="friendsappController">
<md-toolbar>
<div class="md-toolbar-tools">
<md-button href="/home.html" >
Home
</md-button>
</div>
</md-toolbar>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="app.js"></script>
app.js in case you want it :
(function(angular, undefined){
"use strict";
angular
.module('friend-s-app', ['ngMaterial', 'ngMessages', 'ng'])
.controller('friendsappController', inscriptionEditor)
.controller('InscriptionSheet', InscriptionSheet);
function inscriptionEditor($scope, $mdDialog) {
var alert;
$scope.myPathVariable = 'path/to/somewhere';
$scope.showInscription = showInscriptionSheet;
$scope.showSignIn = showSignIn;
function showInscriptionSheet($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog layout="column">' +
'<md-content>' +
'<form style="padding: 20px;">' +
'<div layout="row">' +
'<md-input-container>' +
'<label>First name</label>' +
'<input ng-model="user.firstName" required/>' +
'<div ng-messages="userForm.firstName.$error" ng-show="userForm.firstName.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Last name</label>' +
'<input ng-model="user.lastName" required/>' +
'<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container>'+
'</div>'+
'<md-input-container style="width: 50%">' +
'<label>Nickname</label>' +
'<input ng-model="user.nickname" required minlength="5" maxlength="15"/>' +
'</md-input-container>' +
'<div layout="row">' +
'<md-input-container>' +
'<label>Password</label>' +
'<input ng-model="user.password" type="password" required minlength="5" maxlength="15"/>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Repeat password</label>' +
'<input ng-model="user.repassword" type="password" required minlength="5" maxlength="15"/>' +
'</md-input-container>'+
'</div>'+
'<md-input-container>' +
'<label>E-mail</label>' +
'<input ng-model="user.email" required/>' +
'</md-input-container>'+
'<div layout="row">'+
'<md-button ng-Click="closeDialog()" style="width:50%">' +
'Cancel' +
'</md-button>' +
'<md-button style="width: 50%">' +
'Validate' +
'</md-button>' +
'</div>'+
'</form>'+
'</md-content>'+
'</md-dialog>',
controller: 'InscriptionSheet',
onComplete: afterShowAnimation,
locals: { employee: $scope.userName }
});
function afterShowAnimation(scope, element, options) {
}
}
function showSignIn($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog>' +
'<md-content>' +
'<md-input-container>' +
'<label>Nickname</label>' +
'<input ng-model="user.nickName" required/>' +
'<div ng-messages="userForm.nickName.$error" ng-show="userForm.nickName.$dirty">' +
'<div ng-message="required">This is required!</div>' +
'</div>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Password</label>' +
'<input ng-model="user.password" required type="password"/>' +
'<div ng-messages="userForm.password.$error" ng-show="userForm.password.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container> ' +
'<div layout="row">'+
"<md-button ng-Click=\"closeDialog()\" style=\"width: 50%\" >" +
'Cancel' +
'</md-button>' +
'<md-button style="width: 50%" href="home.html">' +
'Validate' +
'</md-button>' +
'</div>'+
'</md-content>' +
'</md-dialog>',
controller: 'InscriptionSheet',
onComplete: afterShowAnimation,
locals: { employee: $scope.userName }
});
function afterShowAnimation(scope, element, options) {
}
}
}
function InscriptionSheet($scope, $mdDialog, employee) {
$scope.employee = employee;
$scope.closeDialog = function() {
$mdDialog.hide();
};
}
})(angular);
And there are the results :
Without the href :
http://i.stack.imgur.com/zKRKS.png
With it :
http://i.stack.imgur.com/M4JqC.png
thanks for helping me.
I just experienced a similar issue. Note when you switch from an ng-click to an ng-href it will inject an anchor tag instead of a button. To maintain the same visual characteristics I needed to apply an display: inline-block; to the .md-button class (which gets added to the aforementioned anchor tag) in my CSS. This may be the cause of it disappearing on your side.
Let me know if that makes sense or requires any further elaboration.
I have the following shuttle boxes directive:
<shuttle-boxes ng-options="item for item in itemList" ng-model="myModel" />
My template looks like this:
template: '<div class="shuttle-boxes">' +
'<select multiple="multiple" class="shuttle-boxes-left"></select>' +
'<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-right"></i></button>' +
'<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-left"></i></button>' +
'<select multiple="multiple" class="shuttle-boxes-right"></select>' +
'</div>'
What I want to do is take the ng-options repeater from <shuttle-boxes> and use it to populate <select class="shuttle-boxes-left">.
The way I am trying to do it that isn't working is simply copying over the ng-options attribute to the select list like so:
var availableList = cElement.find('.shuttle-boxes-left'),
repeater = cAttrs.ngOptions;
availableList.attr('ng-options', repeater);
Here is the fiddle: http://jsfiddle.net/dkrotts/tHTAY/1/
What am I doing wrong?
I suggest you only pass the itemList to the directive (and myModel) and put the ng-options inside your template:
<shuttle-boxes items="itemList" ng-model="myModel"></shuttle-boxes>
Directive:
myApp.directive('shuttleBoxes', function($timeout) {
return {
restrict: 'E',
scope: { items: '=', ngModel: '='},
template: '<div class="shuttle-boxes">' +
'<select multiple="multiple" class="shuttle-boxes-left"
ng-options="item for item in items" ng-model="ngModel"></select>' +
'<button class="shuttle-boxes-btn" type="button">' +
'<i class="icon icon-arrow-right"></i></button>' +
'<button class="shuttle-boxes-btn" type="button">' +
'<i class="icon icon-arrow-left"></i></button>' +
'<select multiple="multiple" class="shuttle-boxes-right"></select>' +
'</div>',
replace: true
}
});
Fiddle.