I have a code that looks like this:
<div id="ng-div" ng-app="app">
<div ng-controller="dataController">
//... stuff that populates $scope.data
<button id="submit1" ng-click="processData()">Quote</button>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('dataController', ['$scope', '$http', function($scope, $http) {
$scope.data = [];
$scope.processData = function(jobs) {
console.log($scope.data);
};
}]);
</script>
<button id="submit2">Quote (Outside scope)</button>
Due to legacy/design limitations, I need to have the Quote button to be somewhere else (which is outside the ng-app div/scope), for example the "submit2" button.
How can I trigger the processData() function using vanilla/jquery?
try this
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" id="myCtrl">
</div>
<button onclick="myFunction()">Click me</button>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(){
alert('Hii from controller');
}
});
function myFunction() {
angular.element(document.getElementById('myCtrl')).scope().test();
}
</script>
</body>
</html>
Related
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="{{firstName}}">
</div>
</body>
</html>
Here i'm trying to toggle the input field with the function as shown in code.I can see the value changing in the DOM but it is not rendered by angular properly...input is not toggling...Help me out...Thanks in advance
You don't need to do string interpolation, as ngDisabled accepts a expression pass direct firstName .
<input type="text" ng-disabled="firstName">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="firstName">
</div>
</body>
</html>
You don't have to use interpolation operator {{}}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="firstName">
</div>
</body>
</html>
I am having troubles with using ng-click. I have added ng-click directive to the button. It does not trigger the function associated with ng-click. In Angular Batarang tool, it says the functions are undefined.
I tried the problem in Plunker.It does work. And also If i hard code the file path it works.
index.html code
<!DOCTYPE html>
<HTML ng-app="myEventApp">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 ng-controller="HelloWorldController">{{ helloMessage }}</h1>
<div ng-controller="EventDetail">
</div>
<div ng-include="" src="fileName"></div>
<!--<ng-include src="fileName"></ng-include>-->
<!--<div ng-include="" src="'template/testing10000.html'"></div>-->
<button ng-click=incrementCounter()>Next</button>
<button ng-click=decrementCounter()>Back</button>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="js/app.js"> </script>
</body>
</HTML>
app.js code
var app = angular.module("myEventApp", []);
app.controller('HelloWorldController', ['$scope', function($scope){
$scope.helloMessage = "Book Viewer";
}]);
app.controller('EventDetail', ['$scope', function($scope){
$scope.counter = 0;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
$scope.incrementCounter = function(){
$scope.counter++;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
}
$scope.decrementCounter = function(){
$scope.counter--;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
}
}]);
You declared the functions inside the EventDetail controller, but you have the buttons outside of the controller container in the html.
<div ng-controller="EventDetail">
<div ng-include="" src="fileName"></div>
<button ng-click="incrementCounter()">Next</button>
<button ng-click="decrementCounter()">Back</button>
</div>
I have an application where a part of the page is implemented in angular js. I have a requirement where I have to reload the angular js template coming from the server, based on some user action. I have simulated the exact situation with a dummy code,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript">
var angApp = angular.module("app", []);
angApp.controller("mainCtrl", function($scope){
$scope.p1 = "Hello1";
$scope.p2 = "Hello2";
})
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
function add(){
var tpl = "<div>{{p1}}</div><div>{{p2}}</div>";
$("#container").html("");
$("#container").html(tpl);
angular.element(document).injector().invoke(function($compile){
var obj=$('#angApp');
var scope = angular.element($("#angApp")).scope();
$compile(obj.contents())(scope);
scope.$digest();
});
var angControllerScope = angular.element($("#angApp")).scope();
angControllerScope.$apply(function() {
angControllerScope.p1 = "New Hello";
});
}
</script>
<body>
<button type="button" onclick="add()">Add</button>
<div id="angApp" ng-controller="mainCtrl">
<div id="container">
<div>{{p1}}</div>
<div>{{p2}}</div>
</div>
</div>
</body>
On click of Add button how to get the value as "Hello" again.
Thanks.
Sorry if i have misunderstood what you mean but this is what i think you are trying to achieve...
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.p1 = 'Hello';
$scope.add = function() {
$scope.p1 = 'New Hello'
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
<div class="container" ng-controller="mainController">
<button type="button" ng-click="add()">Add</button>
{{p1}}
</div>
</body>
</html>
Found the solution. I had to recompile the template so that the binding with controller again works fine. Below link was useful.
https://gist.github.com/umidjons/1fb8ae674df4c71f85cf
I have updated the initial code with the working version.
I know how to react to user input in a textarea with ng-change in AngularJS. But how can I get the current input inside the Angular controller? I am missing something like $(this).value(); in jQuery.
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.evaluateChange = function() {
console.log("How do I get the current content of the field?");
};
}]);
</script>
<div ng-controller="ExampleController">
<textarea ng-change="evaluateChange()" id="ng-change-example1"></textarea>
</div>
ng-model
It'll store the value of an input, textarea, or select.
Your html should be like this:
<div ng-controller="ExampleController">
<textarea ng-model="myValue" ng-change="evaluateChange()" id="ng-change-example1"></textarea>
</div>
Then in your controller you can reference that with $scope.myValue
Hope that helps! :)
You can make use of $event for getting value of current element. Something like this
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.evaluateChange = function(obj,$event) {
var currentElement = $event.target;
console.log(currentElement.value);//this will give you value of current element
};
}]);
</script>
<div ng-controller="ExampleController">
<textarea ng-change="evaluateChange(this)" id="ng-change-example1"></textarea>
</div>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.myFunc = function(vals) {
console.log(vals);
$("#result").html(vals);
};
}]);
body{
background:#ffc10721;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl" align="center">
<p>Write something in the Textarea</p>
<textarea ng-change="myFunc(myValue)" ng-model="myValue"></textarea>
<br>Result :<p id="result"></p>
</div>
</body>
</html>
I am having problem with $rootScope. I am changing the value in "button" clicked event, but it's NOT changing in the directive.
HTML page shows "TEST" to start with, on button click, I am expecting to change to "CLICKED". What is the mistake? in my code, please help.
<html>
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script>
"use strict";
var app = angular.module('myApp', []);
app.run(function ($rootScope) {
$rootScope.name = 'TEST';
});
app.controller('btnCtrl', function($scope, $rootScope){
$("#Btn").click( function($rootScope) {
alert('Btn clicked');
$rootScope.name = 'CLICKED';
});
});
</script>
<body>
<div ng-app="myApp">
<b> {{name}} </b>
<p> Clcik button to change above text to "CLICKED", <u>not working why?</u></p>
<div ng-controller="btnCtrl" >
<input type="button" value="Button" id="Btn" />
</div>
</div>
</body>
</html>
Use ng-click instead of binding the click event jquery-way. It should be <input type="button" value="Button" id="Btn" ng-click="assignNewName()" />. And inside your controller:
app.controller('myCtrl', function($scope, $rootScope) {
$scope.assignNewName = function() {
$rootScope.name = 'Foo';
}
});