I am a novice, and don't fully understand functions and how/where they are called but I want to refresh a control that has buttons on it that can be enabled/disabled based on state of something else.
The state is determined when the html for that ctrl is loading.
Question is:
For this control, will the reload() command reload only the TaskCtrl, or the entire web page containing all controls? I don't want to reload the entire page.
var mainCtrl = angular.module('MyCtrl', []);
mainCtrl.controller('TaskCtrl', ['$scope', '$routeParams', '$window', '$location', '$rootScope', '$log',
function($scope, $routeParams,
$window, $location, $rootScope, $log)
{
$scope.loadStuff = function() {
.......
$scope.studyToken = ret.studyToken;
$scope.studies = ret.studies;
$window.location.reload();
}
I notice that "loadStuff" function is in another control so I'm assuming that this is a "scope" function that when it executes it can be local in other controls and perform other functions in that control when it executes?
Any suggestions on references for learning these concepts are welcome.
Related
I'm trying to play around with extending controllers so the same code can be used in multiple places but extended with additional functionality where required. eg. when some functionality is available to some users but not others.
So I'm starting with a little experimentation with a very basic example. I have a simple controller and a more advanced controller that I extend with the simple controller. It all works so far, except when a function in the simple controller changes a property, the view doesn't update, although the property does update.
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope', '$http', '$anchorScroll',
function($scope, $http, $anchorScroll) {
var vm=this;
vm.base_property='this is the base';
vm.baseFunction = function()
{
console.log('base function pressed');
vm.base_property='base function pressed';
console.log(vm.base_property);
}
}]);
app.controller("myCtrl2", ['$scope', '$http', '$anchorScroll', '$controller',
function($scope, $http, $anchorScroll, $controller) {
var vm=this;
angular.extend(vm, $controller("myCtrl", {
$scope: $scope
}));
vm.extended_property='this is extended';
vm.extendedFunction =function()
{
vm.extended_property = 'extended pressed';
}
}]);
<div id="app" ng-app="myApp" ng-controller="myCtrl2 as cal">
base Property: {{cal.base_property}}<br />
<button ng-click="cal.baseFunction()" >Base Function</button><br />
extended Property: {{cal.extended_property}}<br />
<button ng-click="cal.extendedFunction()" >Extended Function</button>
</div>
So clicking the extended function button , the text in the view for cal.extended_property updates, but clicking the base function button, the console output indicates the function is run and that the base_property has been updated but the value in the view doesn't change
I tried added $scope.$apply() but that just throws an error Error: [$rootScope:inprog] http://errors.angularjs.org/1.6.4/$rootScope/inprog?p0=%24apply (not ideal anyway as the real script is a lot more complex and I didn't want to have to be running that every time the base controller changes a property)
If there's a better way to achieve what I'm trying to do that isn't too complicated, I'm open to that too. Essentially I have a controller and I want to, in some circumstances, add additional properties and methods to that controller and ideally have it function seemlessly as if it were all the 1 controller
I am new to angular and am trying to alter the default behavior of a textangular text input field on my site's backend (I am a guitarist, not a web developer, but can usually figure out what I need to do...). The field has an option to specify a youtube url and then textangular converts that to an image for purposes of editing in the backend. Then in front end textangular has means to have a youtube url displayed correctly as an iframe.
However, on the front end I am not using angular and I read that in my case, to get a youtube embed to show up in front end as iframe you have to use the taApplyCustomRenderers function.
For example, see here:
how to strip placeholder img in textAngular editor in scope var?
In my angular app, here are some of the relevant lines:
angular.module('dashboard')
.controller('EditController', ['$scope', '$http', '$location', '$routeParams', function ($scope, $http, $location, $routeParams) {
$scope.save = function () {
$scope.busy = true;
// I thoguht I could do this:
$scope.somefield = taApplyCustomRenderers($scope.somefield);
// then I would save to model
});
I am getting error that taApplyCustomRenderers is undefined. I thought based on what I read that taApplyCustomRenderers is an available function when using textangular but being new to this I suppose I am missing some key step about injecting the function into the controller or something.
Hoping someone can shed some light.
Thanks in advance!
Brian
TLDR; When you try to access taApplyCustomRenderers you are recieving an error since it is not given to this current function, Inject the function and it will work.
The Problem
While I have never actually tried using textAngular, let me explain what the problem is, and from there it should be easy to find the solution.
Your EditController is just a regular javascript function that gets run and attached to the relevant DOM element, so it only has access to functions that are declared in its own scope (or globally).
Here is your exact code just indented differently so you can understand better:
angular.module('dashboard').controller(
'EditController',
[
'$scope',
'$http',
'$location',
'$routeParams',
function ($scope, $http, $location, $routeParams) {
...
$scope.somefield = taApplyCustomRenderers($scope.somefield);
}
]
);
As you can see, the controller function has two parameters, the first being a string and the second an array, and the last element in the array is just a regular function.
The solution
Checking the textAngular documentation I saw that the taApplyCustomRenderers is a factory, which means you can inject it into your controller function as so:
angular.module('dashboard').controller('EditController',
['$scope', '$http', '$location', '$routeParams', 'taApplyCustomRenderers',
function ($scope, $http, $location, $routeParams, taApplyCustomRenderers) {
taApplyCustomRenderers(); // is now Available.
}
]);
I need a function where I can use $window.history.back() to be called from every view regardless of what controller is controlling that page.
.run(['$rootScope', '$state', 'CommonUserModel', 'InitialiseService','$window', function($rootScope, $state, $window, commonUserModel, initialiseService) {
$rootScope.link = function(){
$window.history.back();
};
So I have this function put in the app module. Injected window object because it complained about it. But now it also complains that it "Cannot read property 'back' of undefined".
I am calling this function with $rootScope from other controllers as I read through StackOverflow. I had to inject $rootScope to other controllers like this.
homeViewModule.controller("simDetailsController", [ '$rootScope','$scope', 'ModalDialogService', 'CommonTagModel', '$location','$window',
function($scope, modalDialogService, commonTagModel, $location, $window,$rootScope) {
self.link = function(){
$rootScope.link();};
Can you give me an advice?
Keep in mind that I am pretty newbie on AngularJS I still don't get this messy, complex framework.
The order in which you have injected $window & $rootScope in the parameters list does not match the string array list.
You have mentioned '$window' as the 5th element in the string array, while, it is the 3rd element in the parameters list.
Also, in your code, '$rootScope' is the 1st element in the string array, while, it is the 6th element in the parameters list.
Replace the first lines in both of your code snippets with these:
.run(['$rootScope', '$state', 'CommonUserModel', 'InitialiseService','$window', function($rootScope, $state, commonUserModel, initialiseService, $window) {
homeViewModule.controller("simDetailsController", [ '$rootScope','$scope', 'ModalDialogService', 'CommonTagModel', '$location','$window',
function($rootScope, $scope, modalDialogService, commonTagModel, $location, $window) {
You should use routes:
https://docs.angularjs.org/api/ngRoute/service/$route
Hey guys got a little problem that i cant seem to see the problem for. Im building an angular application and im getting the error stated in the question title. Ive injected the $timeout to the controller but im still getting an error with this bit of code can some one tell me where i may be going wrong?
cheers
(function() {
'use strict';
angular
.module('my.module')
.controller('NewSearchController', NewSearchController);
NewSearchController.$inject = ['$rootScope', '$scope', '$location','UserService',
'SearchService', '$window', '$controller', '$mdDialog', 'ModalService', '$routeParams', '$timeout'];
/**
* #namespace ContactController
*/
function NewSearchController($rootScope, $scope, $location, UserService, SearchService, $window, $controller, $mdDialog, $routeParams, $timeout)
Timeout code:
var timerMax = false;
$scope.$watch(NewSearchController.searchObject.maxDayRate, function(){
if(timerMax) {
$timeout.cancel(timerMax);
}
timerMax= $timeout(function() {
NewSearchController.updateSearchFilters();
}, 5000);
});
The problem is in your injection: 'ModalService' listed as injectable but not one of the parameters so angular will inject 'ModalService' and the values you get for parameters later in the list are all wrong.
If you use something like gulp to build your app then use gulp-ng-annotate to build the injection list automatically. That way it won't go wrong and you never have to worry about it.
'$mdDialog', 'ModalService', '$routeParams', '$timeout']
$mdDialog, $routeParams, $timeout
these two dnt match Change it to
$mdDialog,ModalService, $routeParams, $timeout
you have injected $timeout at position 11th position in controller but in function it is at 10th position as u have missed ModalService in function.So the error is just because of this . You need to inject and add the dependcies at same position otherwise it wont work.
I have a notifications panel. I need to display it only if there are errors. So, I set attribute in my controller called errors :
.controller('mainController', function($scope, $mdToast, $templateCache, $animate, $timeout, $mdSidenav, $mdUtil, $log) {
var mainCtrl = this;
mainCtrl.errors = false;
So in the notifications element I can use like this :
ng-if="mainCtrl.errors"
Initially this is hidden. But after we submit the form (I use Rails for the backend) Rails will send a javascript file and it will run. I need to update the value of error and add content to the element dynamically on that seperate js file. How can I do this?
In your controller -
.controller('mainController', function($scope, $mdToast, $templateCache, $animate, $timeout, $mdSidenav, $mdUtil, $log) {
$scope.errors = false;
In your view -
ng-if="mainCtrl.errors"
In your js file -
angular.element($0).scope().errors = true;
Note : Make sure js file runs in context of your page.