here's my issue: I want to run the code of controllerB into controllerA. The issue is that while the variables are returned to the controllerA, the values from requests are never returned. Here's a plunker to show the issue: http://plnkr.co/edit/GqC9BOKTi8HxQLf2a2yd?p=preview
var test = $scope.$new();
$controller('Ctrl1', {$scope : test});
//the first 2 lines are executed, but the 3d never returns a value
$scope.variable = test.variable;
$scope.varFromFunction = test.varFromFunction();
$scope.varFromRequest = test.varFromRequest;
The first 2 lines execute, but the 3d one never returns a value.
Since varFromRequest is located inside a $timeout method in the first controller with 500ms, it will execute 500s later meanwhile angular completes its linking phase.
Watching varFromRequest in the second controller is the easy solution
test.$watch('varFromRequest', function(new_value, old){
$scope.varFromRequest = test.varFromRequest;
})
Here is the updated plunker http://plnkr.co/edit/TqSjeckrdqeKquEbCwFX
The varFromFunction is undefined when the second controller tries to get a reference. The timeout sets this var after this request. If you delay the request for reference then you will get the appropriate value. This isn't the recommended way of working but it does answer your question why it hasn't been set yet.
myApp.controller('Ctrl1', ['$scope', '$timeout', function($scope, $timeout) {
$scope.variable = 'OH HAI';
$scope.varFromFunction = function(){
return "OH HAI FromFunction";
}
$timeout(function(){
$scope.varFromRequest = "time";
},500);
}]);
myApp.controller('Ctrl2', ['$scope', '$controller', '$timeout', function($scope, $controller, $timeout) {
var test = $scope.$new();
$controller('Ctrl1', {$scope : test});
$scope.variable = test.variable;
$scope.varFromFunction = test.varFromFunction();
$scope.varFromRequest = test.varFromRequest || 'unset';
$timeout(function(){
$scope.varFromRequest = test.varFromRequest || 'still unset';
},500);
}]);
Related
I've looked at a half dozen examples, but none of them seems to work for me - maybe because of the peculiar var myController = [] format of the code I inherited.
.cshtml:
<div id="ng-app" ng-app="cmorApp">
<div
data-ng-controller="myCtrl"
data-ng-init="referralId = #Model.ReferralId">
...
This works, inasmuch as my page correctly renders the value I seek:
data-ng-init="referralId = 12345"
Now I'm just trying to capture it in my controller.
Controller:
var myCtrl = ['$scope', '$http', 'FileUploader',
function ($scope, $http, FileUploader, referralId) {
console.log(referralId);
//$scope.init = function (referralId) {
// console.log(referralId);
//}
//$scope.init();
It outputs undefined.
What am I missing?
.
UPDATE:
This sort of works:
ng-init="init(#Model.ReferralId)
.
$scope.init = function (referralId) {
$scope.referralId = referralId;
}
The problem is, the value is not there when I need it. It only there if I let the page do some processing.
I can't do this, or I'm back to undefined:
$scope.init = function (referralId) {
$scope.referralId = referralId;
}
console.log($scope.referralId);
I have a controller that have defined a route parameters when I open the controller from a link with its parameters the init capture those params but it does not show the data on the form. The init function is ran on controller initialization and it captures all route parameters well but when I assign it to the model on the scope the input is not getting the value. I tried $digest and $apply but that does not work there. How can I make the number input show the value from the route only on initialization?
My route configuration :
when('/mypage/:ofid/:nfid?', {
templateUrl: 'admin/templates/mytemplate.html',
controller: 'MyTemplateController'
}).
My controller-fragment:
angular.module('MyModule')
.controller('MyTemplateController', ['$scope', '$log', '$routeParams', .....
function ($scope, $log, $routeParams, ...) {
$scope.oldId;
$scope.newId;
...
$scope.init = function () {
$scope.oldId = $routeParams.ofid;
newId = $routeParams.nfid;
}
$scope.init();
}
Template fragment:
<input type="number"
class="form-control"
ng-model="oldId"
required/>
$routeParams are passed as strings, and parsing is required for using these in numeric inputs.
Using $scope.oldId = parseInt($routeParams.ofid); works for this situation.
app.controller('MyTemplateController', ['$scope', '$log', '$routeParams',
function($scope, $log, $routeParams) {
$scope.oldId;
$scope.newId;
$scope.init = function() {
$scope.oldId = parseInt($routeParams.ofid);
$scope.newId = $routeParams.nfid;
$log.log($scope.oldId, $scope.newId);
};
$scope.init();
}
]);
The $log.log($scope.oldId, $scope.newId); at the end of the init shows 2, '1' in the Chrome console, which is definitely proof that the parseInt worked, and the textbox is filled correctly.
http://plnkr.co/edit/Oc777cYulT11KQMqdnmd?p=preview
try that:
ng-init="desiredValue = $scope.realValue"
According to angular's documentation
"The ngInit directive allows you to evaluate an expression in the current scope."
But should be used with caution
https://docs.angularjs.org/api/ng/directive/ngInit
I have a variable that i use almost everywhere in my app, in many different controllers.
I'm looking for the best possible way of setting that variable knowing that :
-The variable will need to get updated from a controller and resulting in an update on the whole app ( other controllers mainly).
-Some of those function are instance of an object with function in itself that have a callback , does that cause any issue?
So far there seems to be 2 way of doing that :
rootScope but that rarely advised apparently:
myApp.run(function ($rootScope) {
$rootScope.var = "string";
});
And building a custom directive ( but what about setting it's variable ?)
angular.module('myApp').factory('test', function() {
return {
test : 'string'
};
});
Can anyone point me in the right direction and help me choose betweem the two?
I would recommend using a service or factory save that value in someService.variable and the broadcast n event that this value has been changed. I am attaching sample code. It may contain some syntactical error but I want to give you an idea
angular.module("myapp")
.controller('myCtrl', function($scope, $rootScope, myService) {
$scope.change = function() {
myService.var = 'abc';
$rootScope.broadcast('varChanged');
};
})
.controller('myOtherCtrl', function($scope, $rootScope, myService) {
$rootScope.on('varChanged', function(e) {
use(myService.var);
});
})
.service('mySerice', function() {
this.var = '';
});
can someone explain me why i cannot get the $scope.pk value in my console.log()
'use strict';
angular.module('angularDjangoRegistrationAuthApp')
.controller('TweatCtrl', function ($scope, $location, djangoAuth, djangoTweat, $routeParams) {
$scope.tweek = function(){
console.log(' tweek ');
};
djangoAuth.profile().then(function(data){
$scope.user = data;
$scope.pk = data.pk;
});
djangoTweat.getUserTweeks(1)
.then(function(data){
$scope.tweeks = data
},function(data){
// error case
$scope.errors = 'no tweeks';
});
console.log($scope);
console.log($scope.pk);
The fisrt console.log() returns me the Scope object with a pk value.
The second console.log() returns 'undefined' :(
You are trying to access $scope.$pk before it is set.
The following code is probably run asynchronously, as it is using promises. It will run some time after the console.log statements at the end of your controller initialization. It will only run if the djangoAuth.profile() promise is resolved (succeeds).
djangoAuth.profile().then(function(data){
$scope.user = data;
$scope.$pk = data.pk;
// now log $scope.$pk after it is set (assuming data.pk is not undefined)
console.log("$scope.$pk is", $scope.$pk, "and data.pk is", data.pk);
});
i saw a declaration of $pk, your're trying to log a pk attr of $scope..
Console.log($scope.$pk); //it should be ok..
Another thing, i suggest you to use $log, and include it in the function of the controller, then, you'll be able to use $log.Error, $log.Debug and $log.log to the standard console..
Angular newbie here.
I have the following div:
<div id="mainfr" data-curpos="dy[ {{curPosObj.dy}} ]" ...>blah blah </div>
And in my controller I have:
var nxtest = angular.module('nxtest', []);
var appController = nxtest.controller('AppCtrl', ['$scope', function ($scope) {
$scope.curPosObj = { dir: "down", dy:5 };
$scope.clr = window.setTimeout(function(){ $scope.curPosObj.dy = 777;
window.clearTimeout($scope.clr); }, 5000); //see if the attr responds to a random change
}])
In firebug, inspecting the scope object shows that it is indeed modified. I want to understand why the bound attribute {{curPosObj.dy}} is not 'bound' and the view does not respond to the changing values? Thanks very much in advance.
Update: added link to plunker as suggested - the red text never changes:
http://plnkr.co/edit/HJxEpgR8VepxuT47zJDJ?p=preview
Update 2: OK so there may be a separate issue here - the red text is in a pseudo element whose contrent attribute depends on the main divs attribute... and I'm not calling setAttribute anywhere... but regardless: in firebug, the 'data-curpos' attribute itself is NOT updating, never mind the pseudo elem that depends on it...
That's because angular doesn't tracking scope changes out of the dygest cycle and window.setTimeout that case. You should use the $timeout service instead of window.setTimeout or put code which chenge scope into $scope.$apply call
angularjs API reference - $timeout service
angularjs API reference - scope guide
try this:
var nxtest = angular.module('nxtest', []);
var appController = nxtest.controller('AppCtrl', ['$scope', '$timeout',
function($scope, $timeout) {
$scope.curPosObj = {
dir: "down",
dy: 5
};
$scope.clrPromise = $timeout(function() {
$scope.curPosObj.dy = 777;
}, 5000); //see if the attr responds to a random change
}
])