facing problems with my directive that I've created. The directive seems to be executing, I know this as console.log() was called and some of the template was shown too however the part which didn't show up was the one with angular expression. Here's a sample:
my index.html:
<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">
<head>
<title>this is the title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<ul>
<li>{{section.item1}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<div ng-repeat='product in section.products_section.list_products'>
<directive data='product'></directive>
</div>
</body>
<script src="angularjs/app.js"></script>
</html>
my app.js:
angular.module('appModule', []).controller('controller', ['$scope', function($scope) {
$scope.section = {
item1: 'this is item1',
item2: 'this is item2',
item3: 'this is item3',
products_section: {
list_products: [
{
product_name: 'name 1'
}, {
product_name: 'name 2'
}, {
product_name: 'name 3'
}
] //end of list_products
}
};
}]).directive('directive', [function() {
return {
restrict: 'E',
scope: {
date: '='
},
templateUrl: 'angularjs/template.html',
replace: true,
controller: function($scope) {
console.log('this is controller in directive is called');
}
};
}]);
my template html:
<ul>
<li>{{product.product_name}}</li>
<li>this-is-to-show-this-is-being-executed</li>
</ul>
firefox console:
this is controller in directive is called
what it appears like in browser:
this is item1
this is item2
this is item3
this-is-to-show-this-is-being-executed
this-is-to-show-this-is-being-executed
this-is-to-show-this-is-being-executed
SORRY, Stackoverflow says that I need at least 10 rep to post images.
I see a couple things wrong.
scope: {
date: '='
}
Should be:
scope: {
data: '='
},
And your reference to the scope variable in the directive should be data. not product.
<ul>
<li>{{data.product_name}}</li>
<li>this-is-to-show-this-is-being-executed</li>
</ul>
This works.
app.js
angular.module('appModule', [])
.controller('controller', ['$scope', function($scope) {
$scope.section = {
item1: 'this is item1',
item2: 'this is item2',
item3: 'this is item3',
products_section: {
list_products: [
{
product_name: 'name 1'
}, {
product_name: 'name 2'
}, {
product_name: 'name 3'
}
] //end of list_products
}
};
}])
.directive('directive', [function(scope) {
return {
restrict: 'E',
templateUrl: 'template.html',
replace: true,
};
}]);
index.html
<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">
<head>
<title>this is the title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<ul>
<li>{{section.item1}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<ul>
<li>{{section.products_section.list_products[0].product_name}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<div ng-repeat='product in section.products_section.list_products'>
<directive></directive>
</div>
<script src="app.js"></script>
</body>
</html>
Plunkr
Related
i am just new to angular js and when I tried to study routing one error occurs..
please check this..
here is my index.html
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Angular</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div data-ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.controller('firstController', function($scope) {
$scope.customers = [{
name: 'nik',
city: 'san fransisco'
}, {
name: 'henry',
city: 'new york'
}, {
name: 'avida',
city: 'california'
}, {
name: 'lynda',
city: 'texas'
}];
$scope.addCust = function($scope) {
$scope.customers.push({
name: $scope.newCust.name,
city: $scope.newCust.city
})
}
});
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1', {
controller: 'firstController',
templateUrl: '1.html'
})
.when('/view2', {
controller: 'firstController',
templateUrl: '2.html'
})
.otherwise({
redirectTo: '/view1'
});
});
</script>
</body>
</html>
routing is not working, as it supposed to load "/view2" as default when i take index.html
I hope no need to include code from 1.html and 2.html here, for reference as that just contains the 'li' tag which shows the data from this.
Error is,
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=demoApp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A39%3A222)
Thank.
you must include ng-route script angular-route
I have created a demo at plnkr. I want to disable a particular tab say migration, I tried by writing disabled: true but it doesn't seem to work.
http://plnkr.co/edit/0XgquovKIICmgGcSVSef?p=preview
html code:
<!doctype html>
<div ng-app="TabsApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="punk.css" rel="stylesheet">
</head>
<body>
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
</body>
</html>
Controller code :
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'One',
url: 'coredcplan.html',
}, {
title: 'Two',
url: 'migration.html',
disabled: true,
}, {
title: 'Three',
url: 'schedule.html',
}];
$scope.currentTab = 'coredcplan.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
What you can do is give a property disabled, and check that on the tab click:
$scope.tabs = [{
title: 'One',
url: 'coredcplan.html'
}, {
title: 'Two',
url: 'migration.html',
disabled: true
}, {
title: 'Three',
url: 'schedule.html'
}];
$scope.onClickTab = function (tab) {
if(tab.disabled)
return;
$scope.currentTab = tab.url;
}
See this plunker
I'm trying to create programmatically popover, but faced with following problem. I can't access parent scope inside popover template. Expected result is:
Hello my name is Roman
but I get
Hello my name is undefined
Here is plunker
If I use bs-popover as attribute on any element, then I get expected result.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<title>Popover issue</title>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="defaultCtrl" style="margin: 100px 100px">
<button custom-popover ng-click="showPopover()">Popover</button>
<script type="text/ng-template" id="example.html">
<p>My name is {{user.name || 'undefined' }}</p>
</script>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.8/angular-sanitize.min.js" data-semver="1.3.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.tpl.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['mgcrea.ngStrap', 'ngSanitize']);
app.controller("defaultCtrl", ["$scope", function($scope) {
$scope.user = {
name: "Roman"
};
}]);
app.directive("customPopover", ["$popover", "$compile", function($popover, $compile) {
return {
restrict: "A",
scope: true,
link: function(scope, element, attrs) {
var myPopover = $popover(element, {
title: 'My Title',
contentTemplate: 'example.html',
html: true,
trigger: 'manual',
autoClose: true
});
scope.showPopover = function() {
myPopover.show();
}
}
}
}]);
</script>
</body>
</html>
Thanks in advice
Checkout http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=preview
Prototype inheritance is default on scope in angular.
So if you are not creating isolated scope then you can access parent scope objects from your scope directly until and unless you are not overriding them.
var myPopover = $popover(element, {
title: 'My Title',
contentTemplate: 'example.html',
html: true,
trigger: 'manual',
autoClose: true,
scope: scope
});
scope.showPopover = function() {
myPopover.show();
}
I try to create general directive for filtering array in angular.
<body ng-controller="MainCtrl">
controller: <input type="text" ng-model="query.name" /> - work<br>
directive: <span filter by="name"></span> - not work
<ul>
<li ng-repeat="item in list | filter:query">{{item.name}}</li>
</ul>
</body>
controller and directive are:
app.controller('MainCtrl', function($scope) {
$scope.list = [
{id: 1, name:'aaa'},
{id: 2, name:'bbb'},
{id: 3, name:'ccc'}
];
});
app.directive('filter', function () {
return {
scope: {
by: '#'
},
link: function postLink(scope, element, attrs) {
element.append(
'<input type="text" ng-model="query.' + attrs.by + '">');
}
}
});
Filter in controller works but filter in directive doesn't. I don't know how to fix it.
Solution is fixed in plunker: http://plnkr.co/edit/WLGd6RPQEwMFRBvWslpt?p=preview
Since you have isolated the scopes you have to use eiter $parent or you have to set up two way binding using '=' i have update your example with two way binding
<!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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
controller: <input type="text" ng-model="query.name" /> - work<br>
directive: <span filter by="query"></span> - not work
<ul>
<li ng-repeat="item in list | filter:query">{{item.name}}</li>
</ul>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.list = [
{ id: 1, name: 'aaa' },
{ id: 2, name: 'bbb' },
{ id: 3, name: 'ccc' }
];
alert("123");
$scope.query = { name: "" }
});
app.directive('filter', function () {
return {
scope: {
by: '='
},
replace: true,
template:'<input ng-model="by.name"></input>'
}
});
</script>
</body>
</html>
Trying to get my head around AngularJS directives. I need to pass a full object from my main controller to the directive. See the code below and jsfiddle: http://jsfiddle.net/graphicsxp/Z5MBf/4/
<body ng-app="myApp">
<div ng-controller="MandatCtrl">
<div person myPerson="mandat.person"></div>
<span>{{mandat.rum}}</span>
<span>{{mandat.person.firstname}}</span>
</div>
and the script:
var myApp = angular.module("myApp", []);
myApp.controller("MandatCtrl", function ($scope) {
$scope.mandat = { rum: "15000", person: { id: 1408, firstname: "sam" } };
});
myApp.directive("person", function () {
return {
scope: {
myPerson: "="
},
template: 'test: <div ng-model="myPerson"><input type="text" ng-model="firstname" /></div>'
}
});
Ok, the binding is working fine for mandat.rum and mandat.person.firstname.
However, I'm trying to pass mandat.person to the directive, and it does not work. I know I must be doing something wrong, the question is what ? :)
Pls see below working copy
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<span>{{mandat.rum}}</span>
<span>{{mandat.person.firstname}}</span>
<input type="text" ng-model="mandat.person.firstname" />
<my-directive mandateperson="mandat.person" >
</my-directive>
<script type="text/javascript">
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.mandat = { name: "John", surname: "Doe", person: { id: 1408, firstname: "sam" } };
});
app.directive('myDirective', function () {
return {
restrict: 'E',
template: "<div><span>{{mandateperson.id}}<span><input type='text' ng-model='mandateperson.firstname' /></div>",
replace: true,
scope: { mandateperson: '=' }
}
}
)
</script>
</body>
</html>