template in directive doesn't appear - javascript

I'm new to AngularJS and am learning directives. I used the tutorials from egghead.io and am stuck with the following example:
<html>
<head lang="en">
<script type = "text/javascript" src = "../libs/angular/angular.js" ></script >
<script type = "text/javascript" src = "example.js" ></script>
</head>
<body>
<div ng-app="phoneApp">
<div ng-controller="phoneCtrl">
<phoneDir></phoneDir>
</div>
</div>
</body>
</html>
example.js contains this:
var app = angular.module('phoneApp',[]);
app.controller('phoneCtrl',function($scope) {
});
app.directive('phoneDir',function() {
return {
restrict:"E",
template:'<div> Panel </div>'
}
})
Its a very simple example that's just trying to use a directive in the HTML The problem is I don't see the div having the 'Panel' defined in the template. Can someone help?

directives use camelCase name only in the code, markup uses hyphenated names
use
<phone-dir>

Try adding the replace: true property. I think that will solve your issue.
app.directive('phoneDir',function() {
return {
restrict:"E",
replace: true,
template:'<div> Panel </div>'
}
})

Related

adding div using javascript that uses angularjs to show data

I would like to add a div to my current website.
The div i would like to add should show some json data using angularjs.
My problem is that it does not look like angularjs is working like its supose to when adding html after the page is rendered.
Here is my test:
<html >
<head>
<meta charset="utf-8">
<title>Angular test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<script>
var featureInfoMainDivId = 'FeatureInfoMaster';
function initAngularDataFeatureInfo() {
var s = document.createElement('script');
s.type = "text/javascript";
s.textContent =
'var app = angular.module("featureInfoApp", []); ' +
'app.controller("featureInfoCtrl", function ($scope) { ' +
'$scope.firstName = "John" '+
'$scope.lastName = "Doe" ' +
'});';
document.getElementById(featureInfoMainDivId).appendChild(s);
}
function addFeatureInfoDiv() {
var divMain = document.createElement('div');
divMain.setAttribute('id', featureInfoMainDivId);
divMain.setAttribute('ng-app', "featureInfoApp");
divMain.setAttribute('ng-controller', "featureInfoCtrl");
divMain.innerHTML ='<div> {{ firstName + " " + lastName }}</div>';
document.getElementById('appdiv').appendChild(divMain);
initAngularDataFeatureInfo();
}
</script>
<body >
<div id="appdiv"></div>
<button id="btn_load_grid" onclick="addFeatureInfoDiv();">loaddata</button>
</body>
</html>
You are missing two semicolons in
$scope.firstName = "John";
$scope.lastName = "Doe";
If you load the Angular script it looks for ng-app and bootstraps itself. Since you add Angular specific code after the script is loaded, you need to bootstrap Angular manually with:
//after initAngularDataFeatureInfo();
angular.element(document).ready(function() {
angular.bootstrap(document, ['featureInfoApp']);
});
Please remove this line:
divMain.setAttribute('ng-app', "featureInfoApp");
It is not needed if you bootstrap Angular manually. For further bootstrapping info, see: Angular bootstrapping documentation.
Also: Is there a reason why you are using Angular version 1.2.26? Version 1.5.3 is the latest stable build.
Try using Angular directives. you can create a customer directive which will then feed a template of your liking

How to bind dynamic content to angular-toastr?

I'm using angular-toastr, and I want to have a dynamic content inside toastr, let's say, a counter, how can I update it with no other instance.
Here is my angular script:
// Code goes here
angular.module("myApp", ['toastr'])
.controller("myCtrl", myCtrl);
myCtrl.$inject = ["toastr"];
function myCtrl(toastr){
var vm = this;
vm.cont = 0;
vm.start = function(){
//I need create only one toastr with vm.cont update for each increment
toastr.info(vm.cont + " en espera", 'Transferencias y pagos', {
allowHtml: true,
extendedTimeOut: 0,
tapToDismiss: true,
timeOut: 0,
onHidden: vm.listWaitView
});
};
vm.increment = function(){
vm.cont++;
vm.start(); //function that trigger the toastr
};
}
My view:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link data-require="angular-toastr#1.3.1" data-semver="1.3.1" rel="stylesheet" href="https://rawgit.com/Foxandxss/angular-toastr/1.3.1/dist/angular-toastr.css" />
<script data-require="angular-toastr#1.3.1" data-semver="1.3.1" src="https://rawgit.com/Foxandxss/angular-toastr/1.3.1/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as ctrl">
<h1>Counter</h1>
<h2>{{ctrl.cont}}</h2>
<button ng-click="ctrl.increment();">Increment</button>
</body>
</html>
For your convenience I made a simple script that I uploaded in plunkr:
Example:
https://plnkr.co/edit/w7WbfwyYqkqxQWsAPCZz?p=preview
Are you looking for clearing the existing toasts before creating new one. If yes, then try the below
toastr.clear();
toastr.info(vm.cont + " en espera", 'Transferencias y pagos', {
...
Here is the plunker.
https://plnkr.co/edit/2fnYT6Oi7qzUnhW0KgRo?p=info
You can also set new messages without removing the toast and adding a new one as proposed in the accepted answer.
When creating a toastr message you get an ActiveToast instance returned. On this active toast you can access a ToastRef instance throught the toastrRef property and from there you can get access a property componentInstance (by default an instance of Toast if you do not use your own custom component). On this Toast instance you can set a new message directly as follows:
const toast: ActiveToast = this.toastr.success('Something just happened');
const toastComponent: Toast = toast.toastRef.componentInstance;
setTimeout(
() => toastComponent.message = 'Toast message has changed', 3000
);
This solution was mentioned by MikeAlexMartinez in the following GitHub issue inside the ngx-toastr repository:
Hope it will be useful for others ending up here.

Can't make Angular.js to work

I'm trying to learn Angular.js. I set up a simple page, in which I want to display a message from my script file. Here's the HTML structure:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
And this is my script.js:
var MainController = function($scope){
$scope.message = "my message";
};
I'm supposed to see the words my message on the page, but instead I'm seeing literally {{message}}. I tried to wrap the JS code in self-envoking function:
(function() {
var MainController = function($scope) {
$scope.message = "my message";
};
}());
But it didn't have any result.
What am I doing wrong?
It's old syntax and you cannot declare controller like that. Now you need to register controller on your module.
angular.module('anyModuleName',[]).controller('yourControllerName',function(){
});
and also edit to ng-app="anyModuleName" where you initialize your app. In your case <html ng-app="anyModuleName">

Render angular's html from the variable on scope

I'm aware of security implications related to my request, but I need to allow a special super admin group of users an ability to create and evaluate angular html contained within variable on current $scope
Here is an example plunk:
<!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.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="variable = 3; content = '{{ variable }}'">
<div>
The value of $scope.variable === "{{ variable }}"
</div>
<div>
The value of $scope.content === "{{ content }}"
</div>
<br>
<div>
The value of $scope.content is <b>ng-model</b>'ed via the following textarea:<br>
</div>
<textarea rows="3" ng-model="content"></textarea>
<div style="border: 1px solid black">
Instead of rendering the value of the $scope.content field which is currently equal to "{{ content }}" I need to render compiled and evaluated value which should be equal to "{{ variable }}"
</div>
</body>
</html>
Any suggestions?
Thank you in advance!
You can make a directive that uses the $compile service to do this for you.
Here is what I came up with, and a fork of your Plunkr to show that it works.
app.directive('compile', function($compile) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var prevScope;
scope.$watch(attrs.compile, function(newVal, oldVal) {
// create a span (an inline element) so we have an actual DOM node to
// set the innerHTML of.
var newElem = document.createElement('span');
newElem.innerHTML = newVal;
// clean up first
if (prevScope) {
prevScope.$destroy();
prevScope = null;
}
// clear out the contents of this element
elem.empty();
// and replace it with the raw (uncompiled) node
elem[0].appendChild(newElem);
// now the node is in the DOM so we can compile it
// but we want to use a try..catch because the user
// might be in the middle of typing a new expression,
// but the syntax right now is not valid so the
// expression parser will throw an error.
try {
// compile the node in the DOM with a child of the existing scope
prevScope = scope.$new();
$compile(newElem)(prevScope);
} catch (e) { /* don't need to do anything here */ }
});
}
}
});

jquery bxslider is not working with templates inside ng view

I'm using jquery bxslider on my first angular project. It is not working with template inside ng view. If use this one without ng view means it is working.
This is my HTML page:
<!doctype html>
<html ng-app="appSathya">
<head>
<meta charset="utf-8">
<title>Modest</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>
<body>
<header ng-include='"template/header.html"'></header>
<section ng-view></section>
<script src="js/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is my javascript file
// JavaScript Document
var app = angular.module('appSathya', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
}]);
app.controller('menuController', function($scope){
$scope.menus = [
{mitem:"Home", murl:"#/link"},
{mitem:"About", murl:"#/link"},
{mitem:"Work", murl:"#/link"},
{mitem:"Team", murl:"#/link"},
{mitem:"Services", murl:"#/link"},
{mitem:"Features", murl:"#/link"},
{mitem:"contact", murl:"#/link"}
];
});
app.directive('startslider',function() {
return {
restrict: 'A',
replace: true,
template: '<ul class="bxslider">' +
'<li ng-repeat="picture in pictures">' +
'<img ng-src="{{picture.src}}" alt="" />' +
'</li>' +
'</ul>',
link: function(scope, elm, attrs) {
elm.ready(function() {
$("." + $(elm[0]).attr('class')).bxSlider({
mode: 'fade',
pager: false,
autoControls: true
});
});
}
};
});
app.controller('PageCtrl', function($scope) {
$scope.pictures = [
{src:'img/banner.jpg' },
{src:'img/banner.jpg' },
{src:'img/banner.jpg' }
];
});
Change you order of script includes to this below:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/angular.js"></script>
the reason that your code may malfunction angular has it's own version of jqlite and strips certain namespaces and attributes... but if you change the order angular has a function that recognize if jquery calls supercede the angular versions.
If all you need is to use a jQuery plugin inside Angular, then
the jQuery Passthrough directive should do it.
First include JQuery before AngularJS, then in jquery code use jQuery instead of $ since angular also uses $.
Some plugins not directly work with Angular. Ex:- Flexslider has separate JS which is compatible with AngularJS.
Here, you can solve your problem by looking at here
Have you tried placing your script src links in the header? Sure, it's sometimes required to place them in the footer, but if you want them to fire before anything else, play about with the order. Looking at the code, I'd suggest placing your <script src="js/jquery-1.9.1.js"></script><script src="js/jquery.bxslider.js"></script> tags in the head?

Categories