I want to use several functions in one controller. First family makes a request, the second part of the page should display by pressing the button (as here http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events_toggle).
The first function is working fine, but the second is not.
app.controller('DemoCtrl', function($http) {},function($scope){})
This is the second function of the controller:
function($scope){
$scope.showMe=false;
$scope.myFunc=function() {
$scope.showMe=!$scope.showMe;
}
As planned at the touch of a button should show the page:
``
<body ng-app="jsbin">
<div ng-controller="DemoCtrl as vm">
<button ng-click="myFunc()">Click Me!</button>
<div ng-show=vm.showMe>
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
`
Sourse:http://zalil.su/3296697
angular controller takes one function with all dependencies.
app.controller('DemoCtrl', function($http,$scope) {
$scope.showMe=false;
$scope.myFunc=function() {
$scope.showMe=!$scope.showMe;
}
$scope.makeAjax= function(){
$http.something()...
}
})
got through this link https://docs.angularjs.org/guide/controller
Related
<script>
function myFunction() {
console.log('YAY');
alert("Hello! I am an alert box!!");
}
</script>
<button type="button" ng-click="myFunction()">Submit</button>
ng-click is not working in this case. Also how to call an unnamed JavaScript function on click?
If you really need to do that, like it's part of some library, you could do it by injecting $window service in your controller, then calling your controller function "myFunctionInController()"
<script>
function myFunction() {
console.log('YAY');
alert("Hello! I am an alert box!!");
}</script>
<button type="button" ng-click="myFunctionInController()">Submit</button>
and from that function call my function
$window.myFunction()
myFunction should be declared inside the controller. Check simple example
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunction = () =>{
console.log('YAY');
alert("Hello! I am an alert box!!");
}
});
</script>
The button should be inside controller Scope or Child or ng-controller directive
<div ng-app="myApp" ng-controller="myCtrl">
<button type="button" ng-click="myFunction()">Submit</button>
</div>
step 1: create a Module for html
var angularApp = angular.module('angularApp',[]);
step 2: create a Controller for View
angularApp.controller('HomeCtrl',['$scope',function($scope){
}]);
step 3: create html
<div class="main" ng-app="angularApp">
<div class="Main" ng-controller="HomeCtrl">
<button type="button" ng-click="myFunction()">Submit</button>
</div>
<div>
step 4: add the Button click method in the Step 2 means in the Control
angularApp.controller('HomeCtrl',['$scope',function($scope){
$scope.myFunction = function(){
("Hello! I am an alert box!!");
}
}]);
I have a bit of a complicated MVC project that we are adding some Angular capability to. I am very new to Angular and have watch three Angular courses on Pluralsight now. They have been very helpful but I am missing some piece of understanding.
I understand that I need to have just one ng-app (unless I want to bootstrap and I don't think I want to). So this app has defined my config and a custom directive. The custom directive is working nicely but when I click on a link in that directive it does not go anywhere....well perhaps it does but not where I am expecting. Fiddler shows nothing unusual like 404 or 500 errors.
(function ()
{
"use-strict";
angular.module("appMainNav", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/MySearch", {
controller: "routingController"
});
$routeProvider.otherwise({ redirectTo: "/" });
})
})();
My routingController:
(function () {
"use strict";
angular.module("appMainNav")
.controller("routingController", routingController);
function routingController($http) {
var vm = this;
alert("Routed");
}
})();
My HTML link as rendered:
Search
I don't get a page not found...the url just appends the #/MySearch. No console errors etc.
I was expecting to get a javascript alert...?
TIA
Edit
Should have added sooner. Here is markup:
_Layout page:
<body>
<div ng-app="appMainNav" ng-controller="routingController" class="container">
#RenderBody()
</div>
</body>
RenderBody is Index.cshtml:
<div class="row">
<div>
Header Stuff
</div>
</div>
<div class="row">
<div class="col-md-2">
<dashboard-main-nav></dashboard-main-nav>
</div>
<div class="col-md-3">
<div></div>
</div>
<div class="col-md-8">
<div></div>
</div>
</div>
<div class="row">
<div>
Footer Stuff
</div>
</div>
The custom directive angular code was left out of the snips above however that is where the link is generated.
You need to assign an event handler to a click event on the anchor tag:
Search
where foo is a function defined on the controller's scope:
function routingController($http, $scope) {
var vm = this;
$scope.foo = function(){
alert("I am so tired");
}
alert("Routed");
}
Try that and it should work.
I have the following HTML
<html ng-app="processBeautifierApp">
...
<body ng-controller="PBCtrl" style="padding: 20px;">
<div id="header">
<div style="padding: 7px; float: right;">
<select ng-model="selectedProcess" ng-options="prozess as prozess for prozess in prozessListe"></select><br/>
<button type="button" ng-click="forceRefresh()">Force DCTM Refresh</button>
</div>
</div>
...
</body>
The corresponding javascript
var processBeautifierApp = angular.module('processBeautifierApp', []);
processBeautifierApp.controller('PBCtrl', function ($scope, $http, $interval, $window){
...
$scope.forceRefresh = function() {
...
}
});
The select element and the button are showing correctly. The options have been populated from the mode, $scope.selectedProcess changes when the user selects a different option.
But: The ng-click of the button doesn't react. $scope.forceRefresh() will never be called. There is no error on the console ... it just doesn't react at all. Can you see why?
Check the working example of your code plnkr.co
var processBeautifierApp = angular.module('processBeautifierApp', []);
processBeautifierApp.controller('PBCtrl', function ($scope, $http, $interval, $window){
$scope.forceRefresh = function() {
alert("asd");
}
});
Ok the solution was as simple as possible ... I am really ashamed
I used $scope.forceRefresh as the name of the function, but I also used $scope.forceRefresh somewhere else in the code as a boolean flag to enable/disable force refresh. Renaming the function did the trick
Is this the correct way of doing it? The main disadvantage is that I have to do this on each form and controller.
I have one form and want to access that form by storing a variable in a controller variable and then access it in my controller.
In my view im doing this:
<form name="formName">
<div ng-init="setForm(formName);" />
</form>
And in my controller i got
$scope.setForm = function (form) {
$scope.myForm = form;
}
Now after doing this I have a controller variable which is $scope.myForm.
The form will automatically be available via $scope, no need to explicitly save it.
If you however need to log it at controller initialization you need to wait for Angular to have processed it.
HTML:
<body ng-controller="MyController">
<form name="formName">
</form>
</body>
JS:
app.controller('MyController', function($scope, $timeout) {
$scope.$evalAsync(function() {
console.log($scope.formName);
});
});
Demo: http://plnkr.co/edit/wGPKKIGjlQ6Q4GT0aAC6?p=preview
I am trying to use div with ng-click for routing:
ng-click="go('/item/{{item.id}}').
I can call $parent.go or even go when using ParentCtrl. But ParentCtrl_2 does not work at all. I tried to look for some answers, but can't figure it out. What am I missing?
app.controller('ParentCtrl', function($scope) {
$scope.go = function(path) {
console.log(path);
}
}
);
app.controller('ParentCtrl_2', ['$scope', '$location',
function($scope, $location) {
$scope.go = function(path) {
$location.path(path);
}
}
]);
app.controller('ChildCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
...
}
]);
There are number of unanswered questions here but, like what is the structure of your html ng-controller structure.
Also the call sytax in html is wrong for
ng-click="go('/item/{{item.id}}')
It should be
ng-click="go('/item/'+ item.id)"
Said that depending on where the ng-click is declared it would have access to parent methods. If you can access a method using $parent then you can access the method directly due to prototypal inheritance.
If structure is like
<div ng-controller='ParentCtrl'>
<div ng-controller='ParentCtrl_2'>
<div ng-controller='ChildCtrl'>
<!-- ng-click somewhere here -->
</div>
</div>
</div>
Then you access the ParentCtrl_2 method go whenever you call.
If it is
<div ng-controller='ParentCtrl'>
<div ng-controller='ParentCtrl_2'>
</div>
<div ng-controller='ChildCtrl'>
<!-- ng-click somewhere here -->
</div>
</div>
Then you have access to ParentCtrl method go method only.