<section ng-app="app" ng-controller="ctrl">
<div id="output">{{ foo }}</div>
<button ng-click="myFun()">Click me</button>
</section>
var app = angular.module("app", []);
app.controller('ctrl', function($scope, $http){
$scope.bar = 123;
$scope.myFun = function(){
$http.get('template.html').then(function(response){
$scope.foo = response.data;
});
};
});
//template
<h1>{{ bar }}</h1>
I'm new in angularjs
I try to create a ng-click and get a template data into page like ajax
I try to use variable inside of template
anyone know how to pass variable to template in angularjs?
I find another way to solve your question, i hope this sample helps you
<html ng-app="app" ng-controller="ctrl">
<head>
<title>sample</title>
</head>
<body>
<div ng-include="template"></div>
<button ng-click="myFun()">Click me</button>
<script src="angular.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ctrl",
function ($scope) {
$scope.bar = 123;
$scope.myFun = function () {
$scope.template = "temp.html";
};
});
</script>
Template
<h1>{{ bar }}</h1>
Related
Here is HTML with internal script
<html>
<body ng-controller="test">
<span> {{data.name}} </span>
<input ng-model="data.name">
<hidden id="test" ng-hide="true"></hidden>
</body>
<script>
var $scope = angular.element(document.getElementById('test')).scope();
$scope.data = {
name : test;
};
<script>
</html>
Here is Controller
app.controller('test', function($scope) {
$scope.data = {};
console.log($scope.data.name) //outputs undefined
})
I want internal script data into the controller. It prints undefined. I defined an object in the controller but updated in the internal script. If suppose I print or bind data from HTML, it does not get updated in the controller scope object. Any Solution for this?
Did you try to fetch it from the controller? Or maybe you will need a more angularjs approach. I created two examples: one for initializing the data in the controller, and one to console.log the niceLittleValue.
(function(angular) {
'use strict';
var myApp = angular.module('niceExample', []);
myApp.config(['$compileProvider', function($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
myApp.controller('test', ['$scope', function($scope) {
$scope.data = [];
$scope.data.name = 'test';
$scope.data.anotherTest = angular.element(document.querySelector('#anotherTest'));
console.log($scope.data.anotherTest[0]);
}]);
})(window.angular);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="niceExample">
<body ng-controller="test">
<input ng-model="data.name" ng-model-options="{debounce: 500}">
<span> {{data.name}} </span>
<hidden id="test" ng-hide="true"></hidden>
<hidden id="anotherTest" value="niceLittleValue" ng-hide="true"></hidden>
<span> {{data.anotherTest}} </span>
</body>
</html>
I am just learning AngularJS and want to use in ng-repeat variable from controller (without using scope), but it doesn't work. Could anyone point out my mistake? This is my code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in myCtrl.names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var that = this;
that.names = ["Emil", "Tobias", "Linus"];
});
</script>
</body>
</html>
Set the variable on the scope.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
Use variable in the controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
var self = this;
self.names = ["Emil", "Tobias", "Linus"];
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as myController">
<select>
<option ng-repeat="x in myController.names">{{x}}</option>
</select>
</div>
Instead of using direct controller name, use that name which we mention where the controller name declare in html code using 'as' keyword.
For example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
var viewData = this;
viewData.names = ["Emil", "Tobias", "Linus"];
});
<div ng-app="myApp" ng-controller="myCtrl as Ctrl">
<select>
<option ng-repeat="x in Ctrl.names">{{x}}</option>
</select>
</div>
I have created a custom attribute called test in angular js. When I write the test attribute just beside the ng-controller keyword i.d.
<div ng-controller="myCon" test="abc"></div> then I can access that test from the controller by using alert($attrs.test). But if I write the custom attribute test other than beside of the ng-controller keyword, I can't access that. i.e.
<div ng-controller="myCon">
<div test="def"></div>
</div>
In this case I got undefined in alert($attrs.test)
Full code...
<html>
<script src="angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="kumar" >
<button ng-click="check()" test="def">Click</button>
</div>
<script>
var app = angular.module("myApp", []);
app.directive("test", function() {
return {
//template : "<h1>Hello</h1>"
};
});
app.controller("kumar",function($scope,$attrs){
$scope.check=function(){
alert(JSON.stringify($attrs.test)); //getting undefined. I
//should get def.
}
});
</script>
</body>
</html>
app.directive("test", function() {
return {
restrict: "A",
scope: {
text: "#test"
}
};
});
Update your directive scope and add restrict . For better understanding refer to this question
You can check it:
<html>
<script src="src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js""></script>
<body ng-app="myApp">
<div ng-controller="kumar" >
<button ng-click="check()" test="def">Click</button>
</div>
<script>
var app = angular.module("myApp", []);
app.directive("test", function() {
return {
//template : "<h1>Hello</h1>"
};
});
app.controller("kumar",function($scope,$attrs){
$scope.check=function(){
var testa=$scope.test;
alert(JSON.stringify(testa)); //getting undefined. I
//should get def.
}
});
</script>
</body>
</html>
You can get the element on click if you pass $event in ng-click, i.e. ng-click="check($event)" and can get the attribute from $event.target.
Check fiddle : https://jsfiddle.net/ayusharma/xb63g9ca/
JS
app.controller('myCtrl', function($scope) {
$scope.clickMe = function(evt) {
console.log(evt.target.getAttribute('test'))
}
});
HTML
<div ng-controller="myCtrl">
<div ng-click="clickMe($event)" test="abc">Click on Me</div>
</div>
I am new to AngularJS. I am trying to use ng-include but it does not show the html files which I refered.
app.js code
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, function($scope)
{
$scope.templateID = 'testing1.html';
$scope.changeTemplateID = function($scope){
$scope.templateID = 'testing2.html';
}
}]);
index.html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<ng-include src="templateID"></ng-include>
<h1>Hello Plunker!</h1>
<p ng-click="changeTemplateID()">next</p>
</body>
</html>
There are two html file in the root directory. They are called testing1.html and testing2.html. I even tried to refer them directly like "'testing1.html'" in the ng-include.
but no success. Any help?
Two errors in your JS code:
var app = angular.module('myApp', []);
// vvvvvvvv must be a string
app.controller('mainCtrl', ['$scope', function($scope)
{
$scope.templateID = 'testing1.html';
// you don't need to pass $scope here:
$scope.changeTemplateID = function(){
$scope.templateID = 'testing2.html';
}
}]);
Plunker for your perusal.
app.controller('mainCtrl', [$scope, function($scope)...
Your [$scope must be ['$scope' like a string, change it and you'll be fine )
I have the need to add in some items from my scope into some inline script I need to run on my site.
From what I have tried in my demo it doesn't look possible to use the values from my scope in inline script tags. What is the best way to achieve this?
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
'{{aaa}}'
<script>console.log('{{aaa}}');</script>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.aaa = 'bbb';
}]);
</script>
Console returns '{{aaa}}'. I want it to return bbb.
<div id="idd" ng-controller="MainCtrl">
'{{aaa}}'
<button ng-click="$log.log(aaa)">log</button>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope','$log',
function($scope, $log) {
$scope.aaa = 'bbb';
$scope.$log = $log;
//console.log($scope.aaa);
//console.log($scope.$parent);
}
]);
</script>