I'm trying to include a css file using this code :
HTML code:
<html ng-app="a">
<head>
<cssA></cssA>
</head>
<body><script src="app.js"></script></body>
</html>
AngularJS
(function () {
'use strict';
var app = angular.module('a', []),
app
.directive("cssA", function () {
return {
restrict: 'E',
templateUrl: "multiple-css.html"
};
});
}());
multiple-css.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https:/maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
How do I please include that html file ?
Directive names are normalized.
In HTML they should be spinal-case:
<html ng-app="a">
<head>
<css-a></css-a>
</head>
<body><script src="app.js"></script></body>
</html>
In JS, they are camel-case:
app.directive("cssA", function () {
return {
restrict: 'E',
templateUrl: "multiple-css.html"
};
});
Related
I need to pass a variable from the server side to AngularJS.
I have the following HTML on the server side
<div ng-app="tablesApp" ng-controller="tablesCtrl" ng-init="lang='#lang';...go();" ...>
<st-date-range ?lang="#lang"? ...> </st-date-range>
...
</div>
I should put somewhere in the HTML code (actually in ng-init, but if there are other options I'm OK with that) my server side #lang value, then Angular should use that value...
I use a directive and I would like to pass the #lang(a server side ASP.NET razor variable) param to angular in order to use it in the template path:
app.directive('stDateRange', [function () {
return {
restrict: 'E',
require: '^stTable',
templateUrl: '/templates/stDateRange.en.html',
scope: false,
link: function (scope, element, attr, ctrl) {
var tableState = ctrl.tableState();
scope.$watchGroup(["minDate", "maxDate"],
function (newValues, oldValues) {
so, my server side #lang param I would like to pass to the directive in order to use it in the template URL, like this:
templateUrl: '/templates/stDateRange.#(lang).html'
P.S.:
I'll take this codepen example to show my need:
var app = angular.module('app', []);
app.directive('testDirective', function(){
var lang = 'en'; // <<< Set the variable HERE << !!!
return {
restrict: 'E',
template: '<p>my lang is "<strong>'+lang+'</strong>" </p>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="app" ng-init="lang='fr'">
<h3>Test directive for 'fr' lang</h3>
<test-directive></test-directive>
</section>
If I understand you right, you want to create dynamic templateUrl based on attr.lang.
So I would write your directive as:
app.directive('stDateRange', [function () {
return {
restrict: 'E',
require: '^stTable',
template: '<ng-include src="getTemplateUrl()"/>',
scope: false,
link: function (scope, element, attr, ctrl) {
scope.getTemplateUrl = function () {
var url = '/templates/stDateRange.' + attrs.lang + '.html'
return url;
};
var tableState = ctrl.tableState();
scope.$watchGroup(["minDate", "maxDate"],
function (newValues, oldValues) {
And HTML call:
<test-directive lang="{{lang}}"></test-directive>
Demo Plunker
[Edit 1]
If you don't want to use link, you can load constant:
app.directive('testDirective', function(Constants){
var lang = Constants.val;
return {
restrict: 'E',
template: '<p>my lang is "<strong>'+lang+'</strong>" </p>'
};
});
app.constant('Constants', {
val: 'Fess'
});
Demo Codepen
You cannot use $scope on your application directive ng-app but you can use $rootScope. I would achieve this by parsing $root.language into your directive and finally load the template dynamically. You could also access $rootScope.language inside your directive directly without parsing $root.language into it. You can do as you wish - demo punkr.
AngularJS application:
var app = angular.module('plunker', []);
app.controller('ApplicationController', function($scope) {});
app.directive('test', function ($http, $compile) {
return {
scope: {
lang: '='
},
restrict: 'E',
link: function(scope, element) {
$http.get('./template.'+ scope.lang +'.html').then(function (result) {
scope.test = 'some test';
element.html(result.data);
$compile(element.contents())(scope);
});
}
};
});
View:
<!doctype html>
<html ng-app="plunker" ng-init="language = 'en'">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<test lang="$root.language"></test>
</div>
</div>
</body>
</html>
Template which includes your server side param:
<!doctype html>
<html ng-app="plunker" ng-init="language = '#lang'">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<test lang="$root.language"></test>
</div>
</div>
</body>
</html>
I have a global search variable that is used by the whole app
newspaper.controller("MainController", function($scope) {
$scope.search = {query:''};
});
Then I have a contenteditable div that I want to bind to $scope.search
app.directive('search', function() {
return {
restrict: 'AE',
replace: true,
template: '<div ng-model="query" id="search"></div>',
scope: {
query: '='
},
controller: function($scope) {
// I want to watch the value of the element
$scope.$watch('query', function(newValue, oldValue){
console.log(newValue);
},true);
},
link: function(scope, element, attrs) {
// Medium JS content editable framework
new Medium({
element: element[0],
mode: Medium.inlineMode
});
}
}
});
The watch is not firing when I type new values into the div, I guess Im still confused on how to link a directive with a model. Here's the HTML
<nav ng-controller="MainControllerr">
<search context="search.query"></np-search>
</nav>
Don't think you need the watch. It's bad practise to use watch functions in your controllers anyway as it makes them really hard to test.
Here's a simplified version of what (I think) your trying to do.
DEMO
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body>
<nav ng-controller="MainController">
<pre>{{query}}</pre>
<search query="query"></search>
</nav>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller("MainController", function($scope) {
$scope.query = {value:''};
});
app.directive('search', function() {
return {
restrict: 'AE',
template: '<input ng-model="query.value" id="search"/>',
scope: {
query: '='
}
}
});
EDIT
If you really want to use a content editable div you'd have to try something like this:
Also, see this SO question from which I've taken and adapted code to create the demo below. Hope it helps.
DEMO2
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body>
<nav ng-controller="MainController">
<pre>{{query}}</pre>
<div search contenteditable="true" ng-model="query.value">{{ query.value }}</div>
</nav>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller("MainController", function($scope) {
$scope.query = {value:'rrr'};
});
app.directive('search', function() {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
element.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(element.html());
});
});
element.html(ctrl.$viewValue);
}
}
});
I am new to AngularJs. I have created a simple custom directive in Angular to print out some text. The code is below:
var demoApp = angular.module('demo-app', ['ngRoute']);
demoApp.directive('helloWorld', function() {
return {
restrict: 'E',
template: '<h1>Hello World!!</h1>'
};
});
In the html file I am using it like below:
<hello-world/>
<script type="text/javascript" src="js/demo-app.js"></script>
I am not seeing the output "Hello World!". Please let me know where I am going wrong? I am using Angular 1.3 version.
I did it following way in my project, and it is working fine.
customDirective.js
myApp.directive('viewTodoSuccessModal', function () {
return {
restrict: 'E',
templateUrl: '/scripts/app-angular/directives/templates/view-todo-success-modal.html'
};
});
app.js
angular.module('myApp', [
'myAppControllers'
, 'myAppDirectives'
]);
included/referenced in html page
<script src="#Url.Content("~/Scripts/app-angular/app.js")"></script>
<script src="#Url.Content("~/Scripts/app-angular/Directives/CustomDirectives.js")"></script>
Hope it helps
Just check whether your module name is 'demo-app' in html or not.If it is not then make it correct.module name in script file should be same as html file.
<html ng-app="demo-app">
<head>
<script src="angular.js"></script>
</head>
<body>
<hello-world />
<script type="text/javascript">
angular.module('demo-app',[]);
angular.module('demo-app')
.directive('helloWorld', function() {
return {
restrict: 'E',
template: '<h1>Hello World!!</h1>'
};
});
</script>
</body>
</html>
JS Fiddle: http://jsfiddle.net/vSpR4/1/
I was using angular growl, which is quite good for showing message.
(https://github.com/marcorinck/angular-growl)
It OK to add a message in a controller, but when add a message in a directive, it's not show, why?
Here is my test code.
a.html
<?xml version="1.0" encoding="UTF-8" ?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/marcorinck/angular-growl/master/src/growl.css" />
<script type="text/javascript" src="../lib/angular/angular.js"></script>
<script type="text/javascript" src="../lib/angular-growl/angular-growl.js"> </script>
<script type="text/javascript" src="../lib/angular-route/angular-route.js"> </script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<div ng-view=""></div>
<div growl="" class='growl-container'></div>
</body>
</html>
a.js
'use strict';
var module = angular.module('a', ['ngRoute', 'angular-growl']);
module.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
controller: 'IndexCtrl',
template: '<button aaa>aaaa</button>'
});
}]);
module.controller('IndexCtrl', ['growl', function (growl) {
growl.addErrorMessage('haha');
}]);
module.directive('aaa', ['growl', function (growl) {
return {
restrict: 'A',
scope: {},
link: function (scope, element, attrs) {
element.bind('click', function (e) {
console.log('aaa');
growl.addErrorMessage('aaa');
growl.addErrorMessage('bbb');
});
}
};
}]);
var $html = angular.element(document);
$html.ready(function () {
angular.bootstrap($html, ['a']);
$html.addClass('ng-app');
});
Whenever you have events outside of angular that change angular scopes you need to use $apply to inform angular that changes are made and to run a digest cycle.
If you were to use ng-click instead you wouldn't run into this problem.
To resolve with current external event code:
element.bind('click', function (e) {
scope.$apply(function(){
growl.addErrorMessage('aaa');
})
});
I am loading a partial in Angular dependant on the route of the URL.
When I load the partial it loads, and responds to the Controllers functions. However I have a directive which has a watcher. This does not work when I use the
It works fine when I load the HTML inside the main page. I have a Plunker of this here
http://plnkr.co/edit/DK33pIrp0HyhUOjwm5X2?p=preview
Essentially clicking "hello" should change the $scope.origin and the watcher should then fire its event. It does not.
My HTML:
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.1.2/coffee-script.min.js"></script>
<script src="app.js"></script>
<script src="directive.js"></script>
</head>
<body ng-controller="MapCtrl">
<ng-view></ng-view>
</body>
</html>
app.js
var app;
app = angular.module("App", []);
app.config(function($routeProvider) {
return $routeProvider.when("/", {
templateUrl: "home.html",
controller: MapCtrl
});
});
this.MapCtrl = function($scope) {
return $scope.clicked = function() {
console.log("clicked");
$scope.origin = Math.floor(Math.random() * 11);
return console.log($scope.origin);
};
};
directive.js
(function(angular) {
var app;
app = angular.module("App");
return app.directive("leaflet", function() {
return {
restrict: "E",
replace: true,
transclude: true,
template: "<section id='map' class='map'></section>",
scope: {
origin: "=origin"
},
controller: function($scope, $attrs) {
return $scope.$watch("origin", (function(newValue, oldValue) {
return alert("its changed");
}), true);
}
};
});
})(angular);
home.html
<button ng-click="clicked()">hello</button>
how can I get this working?
edit: I have just made this pure JS and not coffeescript.
Thanks so all who helped me find the issue.
This can be done by setting the
<button ng-click="clicked()">hello</button>
to
<button ng-click="$parent.clicked()">hello</button>
This is because the ng-view will be a child. This simple fix is now working.