I want to make a Kendo grid with 4 tabstrips, 4 children grids, 5 controllers, first is parent, others are children. Here is a part of code, with one parent and one child controller. Problem is that all the time I got an error "Argument '' is not a function, got undefined" Where should I define it? Everything is stored locally so the preview is not possible
Check this out:
http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-models-between-nested-controllers.html
You don't nest the controllers in your javascript. This is from that link:
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.name = "Peter";
$scope.user = {
name: "Parker"
};
});
app.controller("MyNestedCtrl", function($scope) {
});
Instead, you nest the controllers in your markup. I don't see where you are binding the controllers in your markup, btw.
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name">
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
</body>
This is all from that link I provided.
Related
I want $scope.variable value in browser console but its always occur undefined.
form.htm
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"
required /></p>
<button ng-click="SendData()">Submit</button>
</form>
myctr.js
app.controller('myCtrl', ['$scope', '$http', 'ngCart', '$localStorage',
'$sessionStorage', '$window',
function($scope, $http, ngCart, $localStorage,
$sessionStorage, $window) {
$scope.SendData = function() {
console.log($scope.firstName)
$window.alert($scope.firstName)
};
}
]);
Possible problem is that you're using a simple string value $scope.firstName. If your input is more than one scope "deeper" in the DOM hierarchy, then your $scope.firstName and ng-model in the input become two independent variables so no wonder that you get $scope.firstName undefined. That's the typical problem with simple types and scopes inheritance. Possible ways to solve this would be:
use object to bind data between the controller and template: $ctrl.user.firstName and <input ng-model="user.firstName">.
use the "controllerAs" syntax.
Read more on this in documentation on controllers and scopes.
use the following modified code ---
var app = angular.module('myApp', ['ngStorage']);
app.controller('myCtrl', function($scope, $window,$http,$localStorage,$sessionStorage) {
$scope.SendData = function() {
console.log($scope.firstName)
$window.alert($scope.firstName)
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"
required /></p>
<button ng-click="SendData()">Submit</button>
</form>
</div>
Modified the answer...
As per the definition of ngModel it will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
Here when submit is clicked without filling the text box $scope.firstName is undefined because firstName it is not defined in the current $scope.
If something is typed in the text box , as per the definition of ng-model a firstName property will be created implicitly and added to the scope.
Let controller be
app.controller('MainCtrl', function($scope) {
$scope.lastName='';
$scope.SendData = function() {
console.log($scope.firstName)
alert($scope.firstName)
};
$scope.CheckLast = function() {
console.log($scope.lastName)
alert($scope.lastName)
};
});
HTML
<body ng-controller="MainCtrl">
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"/></p>
<button ng-click="SendData()">Submit</button>
<p>Last Name: <input type="text" name="lastName" ng-model="lastName"/></p>
<button ng-click="CheckLast()">Submit</button>
</form>
</body>
Here Demo plunker you can see firstName is undefined while lastName is not as last name is initialised within the scope. and if something will be filled to firstName text box before submit the it is defined.
As illustrated above I'm trying to access the second level 2 scope from level 3 scope from angular controller
but, parent comes as null and it is able to access Level1 scope though which i dont want
Need too access level2 scope from level3
as you can see in below pic the level 2 scope from parent comes as
null
angular.element(...).scope() will get the scope(not current scope) which your target element belongs to.
In the below example, I have added four input(outside controllers, levelOne, levelTwo, levelThree) to make it clear(open console to confirm it).
angular.module("app", [])
.controller("levelOne", function($scope) {
$scope.data = 'levelOne';
})
.controller("levelTwo", function($scope) {
$scope.childData = 'levelTwo';
})
.controller("levelThree", function($scope) {
$scope.grandChildData = 'levelThree';
console.log($scope.$parent);
var scope = angular.element(document.getElementById("input")).scope();
var parentScope = angular.element(document.getElementById("levelOne")).scope();
var childScope = angular.element(document.getElementById("levelTwo")).scope();
var grandChildScope = angular.element(document.getElementById("levelThree")).scope();
console.log('scope', scope);
console.log('parentScope', parentScope);
console.log('childScope', childScope);
console.log('grandChildScope', grandChildScope);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app">
<input id="input" type="text" value="not in controller">
<hr>
<div ng-controller="levelOne">
<input id="levelOne" type="text" ng-model="data">
<hr>
<div ng-controller="levelTwo">
<input id="levelTwo" type="text" ng-model="childData">
<hr>
<div ng-controller="levelThree">
<input id="levelThree" type="text" ng-model="grandChildData">
</div>
</div>
</div>
</div>
and based on your provided screenshot, maybe you are fitted to the second situation(element belongs to level1's template), then the solution should be moving the element into level3's template.
I am trying to get the value of the ng-model when clicking a button which triggers a function to add each ng-model value to an object. When trying to get the value of $scope.shipNameFirst, it comes up as undefined in the second example.
I've read that it's better to get the value of $scope on the view rather than passing it through the stripeBtn function, so ideally I'd like to do it that way. Hopefully this makes sense.
Can someone explain why this is not working?
Working
HTML
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn(shipNameFirst, shipNameLast)">Checkout with Stripe</button>
Controller
$scope.stripeBtn = function(shipNameFirst, shipNameLast){
$scope.details = {
recNameFirst: shipNameFirst,
recNameLast: shipNameLast,
}
}
Not Working
HTML
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn()">Checkout with Stripe</button>
Controller
$scope.stripeBtn = function(){
console.log($scope.shipNameFirst); //logging this (with $scope) comes up as undefined
$scope.details = {
recNameFirst: $scope.shipNameFirst,
recNameLast: $scope.shipNameLast,
}
}
Thanks!
Check the following code. It's working nicely.
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope){
$scope.stripeBtn = function(){
console.log($scope.shipNameFirst);
$scope.details = {
recNameFirst: $scope.shipNameFirst,
recNameLast: $scope.shipNameLast,
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn()">Checkout with Stripe</button>
</div>
I can use the below code snippets to update the value of one textarea with another simultanoeusly
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input id="id1" type="text">
<input id="id2" type="text">
</div>
</div>
Script file:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', ['$scope', function($scope){
$scope.text1 = '';
}]);
Is there a way I can use the ID to update the value simultanously instead of the ng-model property. Thank you!!!
You can try to use $watch:
$scope.$watch('text1', function () {
document.getElementById('id2').value = $scope.text1;
});
I have object into rootscope and i would like to display some values in form inputs.
I tried following:
<input type="number" ng-model="$root.order.id" class="form-control" id="orderNumber" />
But this is not working.
How i should pass value into ng-model?
Thanks for any help.
No need of attach de $root to the variable, the flow of scope in angular is first search in the local scope for the variable, if not found search the property in $scope.parent, and the rootScope if the high level of parent if not match with any else, then search there.
http://plnkr.co/edit/3ENyPRwrFq5ssR2uLtQy
In this plnkr look the usage of the root scope
Controller:
app.controller('MainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$rootScope.varRoot = {
element: "Jesús"
};
}]
);
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{varRoot.element}}!</p>
<input type="text" ng-model="varRoot.element">
</body>
Just use the name, ex:
$rootScope.order.id = 3;
<input type="number" ng-model="order.id" class="form-control" id="orderNumber" />