I want to load the script template for specific div tag.
In my Demo I have 3 'show' link. If I click any one of the show link it loads script for all 'show' link. But I want to load only the script for that 'show' link which I have clicked.
See the PLUNKER.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
$scope.templateURL = 'my-tmpl';
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective" data-ng-init="names=['1','2','3']">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl">
<p>Hello</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d">
<div ng-include=templateURL></div>
</div>
</div>
</div>
</body>
</html>
If you need to show same things means need to use same template then
use the following code.
Here I have defined a new scope variable.
Look at the updated plunker
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.a = 0; //Here
$scope.showdiv = function(x){
$scope.templateURL = 'my-tmpl';
$scope.a = x; //and Here
};
}]);
})(window.angular);
show <!-- pass x to remember -->
<div id="d" ng-show="a==x"> <!--and check that new variable set as x or not -->
<div ng-include="templateURL"></div>
</div>
If you need to use different template for different link
Then you could use the following code. Here is the plunker.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.names=[{name:'1', template:'tmpl-1', show:false},
{name:'2', template:'tmpl-2', show:false},
{name:'3', template:'tmpl-3', show:false}]
$scope.show = '0';
$scope.showdiv = function(x){
$scope.show = x.name;
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="tmpl-1">
<p>Template 1</p>
</script>
<script type="text/ng-template" id="tmpl-2">
<p>Template 2</p>
</script>
<script type="text/ng-template" id="tmpl-3">
<p>Template 3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="show == x.name">
<div ng-include="x.template"></div>
</div>
</div>
</div>
</body>
</html>
Have a look at below code.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile',
function($scope, $compile) {
$scope.names = [{
'name': '1',
'tmpl': 'my-tmpl1'
}, {
'name': '2',
'tmpl': 'my-tmpl2'
}, {
'name': '3',
'tmpl': 'my-tmpl3'
}];
$scope.showdiv = function(tmpl) {
$scope.templateURL = tmpl;
};
}
]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl1">
<p>Hello1</p>
</script>
<script type="text/ng-template" id="my-tmpl2">
<p>Hello2</p>
</script>
<script type="text/ng-template" id="my-tmpl3">
<p>Hello3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="x.isOpen">
<div ng-include="x.tmpl"></div>
</div>
</div>
</div>
</body>
</html>
demo
Related
I am new and started practicing Angular JS.
My output should give Hello but it is showing {{message}}
Below is HTML code:
<!DOCTYPE html>
<html ng-app="HelloWorldApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="hello_world_controller.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<p>{{message}}</p>
</div>
</div>
</body>
</html>
Below is Angular js code:
angular.module('HelloWorldApp', [])
.controller("HelloWorldController", ["$scope", function ($scope){
$scope.message = "Hello";
}]);
I do not see any error with your code, Check your angular version
DEMO
angular.module('HelloWorldApp', []) .controller("HelloWorldController", ["$scope", function ($scope) { $scope.message = "Hello"; }]);
<!DOCTYPE html>
<html ng-app="HelloWorldApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="hello_world_controller.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<p>{{message}}</p>
</div>
</div>
I just see a blank input box, when I should see the $scope.firstname value. Why does not this work?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp" ng-controller="MyController">
<head>
<meta charset="UTF-8">
<title>Toto App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="myCtrl.js"></script>
</head>
<body>
<input ng-model="firstname">
</body>
</html>
myCtrl.js:
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.name = "John";
});
You're doing $scope.name = "John" instead of $scope.firstname = "John"
I am learning angular js
I am doing small tasks..
but I am getting this error Display the name of the product inside
the tag.
can you tell me how to fix it
providing my code below
html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="product row">
<h3>
{{store.product.name}}
<em class="pull-right"></em>
</h3>
</div>
</body>
</html>
js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController',function(){
this.product = gem;
});
})();
You should use the $scope:
app.controller('StoreController',function($scope){
$scope.product = gem;
});
{{product.name}}
Please try the following snippet.
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController',function($scope){
$scope.product = gem;
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController">
<div class="product row">
<h3>
{{product.name}}
<em class="pull-right"></em>
</h3>
</div>
</body>
</html>
Problem: ng-keypress is not working but if I replace ng-keypress with ng-click then filterSearchData($event) function is working.
HTML:-
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script type="text/javascript" src="ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<body ng-controller="MyCtrl">
<input type="text" ng-keypress="filterSearchData($event)" />
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</body>
</html>
JS:-
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.filterSearchData = function(element) {
console.log(element);
};
});
In this case I recommend to use ng-change instead of ng-keypress.
// HTML:
<input type="text" ng-model="filter" ng-change="filterSearchData()" />
// Controller:
app.controller('MyCtrl', function($scope, $http) {
$scope.filterSearchData = function() {
console.log($scope.filter);
};
});
If for some reason you have to use such an old version of angular, which doesn't support ngKeypress directive, you can always add your own implementation. It's pretty easy to do, for example onKeypress directive:
app.directive('onKeypress', function() {
return {
scope: {
handler: '&onKeypress'
},
link: function(scope, element) {
element.bind('keypress', function(e) {
scope.handler({$event: e});
});
}
};
});
HTML:
<input type="text" on-keypress="filterSearchData($event)" />
Demo: http://plnkr.co/edit/OorXMYKZeXI9Lrc1wrRY?p=preview
I'm guessing there must be something obvious I have missed, this is the second angular app I am building and I have never had this issue before..
Seems both of my controllers are receiving this error. I have confirmed that controllers.js gets loaded and console.log(angcomControllers) does return an object. Other than that I am lost.
index.html:
<!doctype html>
<html class="no-js" lang="en" data-ng-app="angcomApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<!--Library/Framework JS-->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!--script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script-->
<!--App JS-->
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-view class="view-frame"></div>
</body>
</html>
app.js
'use strict';
var angcomApp = angular.module('angcomApp',[
'ngResource',
'ngRoute',
'angcomControllers',
'angcomServices',
]);
angcomApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/items', {
templateUrl: 'partials/items.html',
controller: 'itemsController'
}).when('/categories', {
templateUrl: 'partials/categories.html',
controller: 'categoriesController'
});
}]);
controllers.js
var angcomControllers = angular.module('angcomControllers', ['angcomServices']);
angcomControllers.controller('itemsController' ['$scope', 'Items', function($scope, Items) {
}]);
angcomControllers.controller('categoriesController' ['$scope', function($scope) {
}]);
items.html
<div data-ng-controller="itemsController"></div>
If I need to post any more code please let me know, thanks!
You are missing ,:
angcomControllers.controller('itemsController', ['$scope', 'Items', function($scope, Items){
}]);