How to Programming with Angularjs-controller

javascript,angularjs,dependency-injection,angularjs-controller,angularjs-filter

Here is the plunker of your files http://embed.plnkr.co/6jNXImBddYqjK23FCWUy/preview Your application works as expected. Please check your core files is loaded or not. Hope this helps your code ...

Inject percentage filter in controller

The issue is not with the way you are injecting the filter instead the issue is with the filter itself. You are not using explicit dependency annotation for the percentageFilter. i.e angular.module('mYapp').filter('percentage', ['$window', function ($window) {: Try: angular.module('mYapp').filter('percentage', ['$window', function ($window) { return function (input, decimalForm) { if ($window.isNaN(input)) return...

AngularJS 1.3.8 Using multiple controllers, second controller is not working

javascript,angularjs,angularjs-controller,angularjs-bootstrap

You cannot have more than 1 ng-app directive in the same document. You would need to manually bootstrap the other. Other wise only the first instance of ng-app will be bootstrapped automatically by angular. Other issue is that there is no provider called $scope2, you need to inject $scope. Example:-...

Angular Contoller is not defined

javascript,angularjs,angularjs-service,angularjs-controller,eslint

This doesn't work because of the order of your scripts (and wouldn't work in any order the way you defined it). When Controller.js loads first, there is is still no module named "app". When app.js loads first, it immediately bootstraps the app without the controller. It's best to define one...

Enforce deferring controller logic

UPD (june 2015): eslint-plugin-angular has built-in ng_no_services rule that enforces the deferring controller logic to services or factories. Old answer. Here is the ESLint custom rule that restricts a function, which name ends with Controller or Ctrl, to have any of the configured arguments passed in: module.exports = function (context)...

How to invoke multiple functions/chained calls using ng-click

javascript,html,angularjs,function,angularjs-controller

Technically you could write inline provided changeColor returns promise and inturn your service call must return a promise (which is better compared to traditional passing around callbacks anyways). First change your service to return a promise, an example:- function configuratorService($http){ this.addOption = function(modelCode, colorCode){ return $http.post("Addoption", {modelCode:modelCode, colorCode:colorCode}) .then(function(response){ //logic...

set/get data in service from controllers

javascript,angularjs,angularjs-service,angularjs-controller

I think you may be mixing up the factory() and service() methods in angular. Here is how you could implement your GetEquipment service using either of the aproaches: using module.service() equipService.service('GetEquipment', ['$resource', function ($resource) { equipService.siteId = 1147; // these first two I thought I did right but...nope this.getId =...

Inject sub module to main module

javascript,angularjs,declaration,angularjs-controller,angularjs-module

You are messing up with module declaration. You declared angular.module('app.newProject') two times. While creating it first time you registered SelectionCtrl. After that you created another module with same name angular.module('app.newProject,[]') with dependancy and registered TabController1 controller. When you created second module it overrides first one & now it has only...

initializing ng-app with name disables varibles initialization

javascript,angularjs,angularjs-directive,angularjs-controller

The following works for me. If you set up the module like I did below, it should work angular.module("demo", []); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demo" ng-init="show_login=false;count=0"> <button ng-click="show_login=!show_login;count=count+1">INSPIRE</button> <form ng-show= "show_login"> Username <input type ="text"> <br /> Password <input type = "password"> <p> {{count}} </p> </form>...

Controller and Directive requesting isolated scope on the same element

javascript,angularjs,angularjs-directive,angularjs-controller,angularjs-1.3

The is issue with the latest version of angular, Which is not stable version. That issue is even reproducible with angular 1.3.0 It is working as expected with https://code.angularjs.org/1.2.27/angular.js which is stable release. angular 1.2.27 Fidlle working as expected. angular 1.3.0 and above Fidlle giving some error like you are...

Angular controller error: 'Controller is not a function, got undefined'

controller() is itself a function to be called, not a property to be assigned as you're doing. Try this instead: var app = angular.module('TourneyTime', ['ionic']); app.controller('HomeController', function($scope) { $scope.players = "testing"; }); ...

Can I require a controller, in a directive, set with ng-controller?

You can only do: require: "^ngController" So, you can't be more specific than that, i.e. you can't ask for "MainCtrl" or "MyController" by name, but it will get you the controller instance: .controller("SomeController", function(){ this.doSomething = function(){ // }; }) .directive("foo", function(){ return { require: "?^ngController", link: function(scope, element, attrs,...

How to get Angular controller members in non-Angular code?

You can access controller from non-angular code by $("[ng-controller='MainFormCtrl']").scope() Edited to show how to access scope & all method within controller using Jquery(above) & non-Jquery(below) document.getElementById('yourControllerElementID').scope() ...

Breaking change from between AngularJS 1.2 and 1.4?

angularjs,angularjs-scope,angularjs-service,angularjs-controller

I didn't know any version of Angular allowed you to create a controller without first creating a module. In any case, instantiating a module and registering the controller fix your problem. jsbin Add this to your app decalartion in html: ng-app="app" Modify your script: angular.module('app', []) // this creates a...

AngularJS passing lastTime to a service to display only recent posts

When building services, try and keep all "service-related" functionality inside the service scope. This will help reduce your controller footprint in the long run. In addition, it's important to understand that "promises" are used throughout the angular framework by default. In this case the $http service already returns promises. Please...

AngularJS polling service not continuously updating controller

You got to return some of that data - and dont put the timeout logic in the service - that should be contained in the controller code. You can refactor to handle the response in the controller and the data call contained in the service: cadApp.controller('statsController', function ($scope, $timeout, DashboardStats)...

What is the difference between these two angularjs controller definition

angularjs,cordova,ionic-framework,angularjs-service,angularjs-controller

First one cares about minification. In this controller: myApp.controller('GreetingController', function($scope) { $scope.greeting = 'Hola!'; }); arguments will be minimized to some short values and dependency injection will not work. Please look at: https://docs.angularjs.org/guide/di#dependency-annotation https://docs.angularjs.org/tutorial/step_05 What are the differences in angular controller notation? ...

Angularjs Cannot get the correct data from a service in a controller

$cordovaCamera.getPicture returns a promise, therefore it is asynchronous. You are returning a value you don't have yet. Your addImage function should return a promise and your controller should use the result of that promise. https://docs.angularjs.org/api/ng/service/$q Basically: 1) create a new deferred using $q.defer() object in addImage() 2) return deferred.promise at...

Angular Structure Incorrect Somewhere

c#,angularjs,visual-studio-2012,angularjs-controller,angularjs-controlleras

Below things are missing ng-app directive must be there in on the body/html tag like ng-app="app". Scripts should be loaded in header of your page. You must be loading angular.js before loading any other file which is using angular object References should be <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> <script src="~/Scripts/profileController.js"></script> Update As you...

Same “controller as” name in angular js directive breaks function in parent controller

javascript,angularjs,angularjs-directive,angularjs-controller

The problem you're facing seems to be related to the fact that the directive is being executed on the same scope as the scope where the controller is defined as vm. What you need to do is to create a new scope within the directive. app.directive('testDirective', function() { return {...

AngularJS: Should I convert directive's linking function to a controller?

angularjs,angularjs-directive,angularjs-controller,angularjs-1.3

I consider it best practice to move initialization code and/or exposing API functions inside of a directive's controller, because it serves two purposes: 1. Intialization of $scope 2. Exposing an API for communication between directives Initialization of Scope Suppose your directive defines a child scope (or inherits scope). If you...

controllerAs with directives and isolated scope

javascript,angularjs,angularjs-scope,angularjs-controller,angularjs-1.3

You directive element attributes are wrong, it should be hyphen(-) separated instead of using camel case. Markup <my-buttons save-label="Discard" cancel-label="Cancel"></my-buttons> ...

Angularjs Uncaught Error: [$injector:modulerr]

After angular version 1.3 global controller function declaration is disabled You need to use modularise approach in order to make it work. CODE angular.module('app', []) .controller('Ctrl', ['$scope', Ctrl]); function Ctrl($scope) { $scope.age = 24; }; There is some issue with angular 1.3.14 downgrade it to 1.3.13 works fine, I'd prefer...

Binding issue in AngularJS

javascript,angularjs,angularjs-scope,angularjs-controller,angularjs-controlleras

You should bind the variables to this instead of $scope as you are using controllerAs approach Controller myApp.controller('FollowController', ['$scope', '$http', function($scope, $http) { var status = ""; var follow = this; $http.get('/Home/CheckFollower?idToFollow=' + profileId + '&followerId=' + currentUserId). success(function(data) { //check if it is a follower if (data) { //...

Add new text box on click of a button in angular js

angularjs,angularjs-ng-repeat,angularjs-controller

In you code, you are doing:- $scope.addContact = function() { $scope.contact.push({$scope.contact}) } This is where the problem is. If you just need to add an empty textbox, you just need to add an empty contact to contacts, and ng-repeat will take care of adding the new textbox in the list....

AngularJS: values of defined variables inside controller are not getting displayed correctly

There are a few things that need to be changed in your code you need to create an angular module var app = angular.module('app', []); 2 add directive to html element <html ng-app='app'> need to register MainController against angular module like this: app.controller('MainController', function($scope) { var person = { firstName:...

Why can't I create this controller in my test?

javascript,angularjs,ionic-framework,angularjs-routing,angularjs-controller

There is no error to show there, Because you really have not attached anything on the controller instance, everything is attached to the scope. So you get an empty object, because controller does get instantiated after all. I you use controllerAs syntax or attach properties on the controller instance you...

Controller being called twice in Ionic (AngularJS)

Ok so after a long time debugging and check stuff out, I found out that it was an issue relating to the Nav Bar in ionic, essentially, I was calling <ui-view></ui-view> & <ion-nav-view></ion-nav-view> on the same page, so basically doubling up on my views which in turn was calling the...

TypeError: (intermediate value)(intermediate value).success is not a function (angular)

javascript,angularjs,angularjs-scope,angularjs-controller,angularjs-http

You $http call code should be $http({ instead of $http = ({ & $log, warn should be $log.warn Code $http({ method: 'GET', url: 'api/Entries/' }).success(function (data, status, header, config) { successcb(data); }). error(function (data, status, header, config) { $log.warn(data, status, header, config); }); ...

AngularJS — Explicitly returning a value from a controller

javascript,angularjs,routing,angularjs-routing,angularjs-controller

There's no specific meaning to it and as is removing the return wouldn't change anything. If you look at the other functions, it seems that that developper has the habit to return from every function, even when not necessary. That is probably just a habit. In somes instances it could...

How to do load page in Angular JS?

You need to use angular routing for it. Basically its like an SPA. For that you need to use ngRoute module. In that you need to setup $routeProvider by saying that in specific url, template & controller, etc. var app= angular.module('app', ['ngRoute']); app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/tab/:id', { templateUrl: 'template.html',...

Why wouldn't you use explicit annotations when defining controllers in AngularJS?

javascript,angularjs,dependency-injection,angularjs-controller

The inline array annotation is simply a workaround over Javascript limitations to allow Angular code to be minified and not to stop working. But it isn't a great solution because if forces you to duplicate your code. And we all know how bad duplicate code is. Angular documentation itself acknowledges...

Using controllerAs syntax in Angular, how can I watch a variable?

angularjs,angularjs-scope,angularjs-controller,angularjs-factory

You can always use a watcher evaluator function, especially helpful to watch something on the controller instance or any object. You can actually return any variable for that matter. var vm = this; //Where vm is the cached controller instance. $scope.$watch(function(){ return vm.propToWatch; }, function() { //Do something }, true);//<--...

Angular Js : Button click to get data from two controllers and showing it in third

You are not injecting your service correctly into your controllers - see this fiddle Also remove the data param from you getName() call: <button ng-click="getName()"> ...

View does not reflect the data from $http.get(inside an angularjs controller)

angularjs,angularjs-controller,angularjs-templates

Define a $scope variable outside xyzFunc, bind this variable, then set it's value from $http callback. Since you use angular's $http you do not have to worry about apply. Added the code for better visualization: app.controller('ViewClockController', function($scope, $http, $interval){ $scope.viewAll = this; $scope.viewAll.widget = []; $scope.xyzFunc = function(){ $http.get('/statistics/clock').success(function(data) {...

AngularJS: How to dynamically initialize a controller in a template from within another controller

That is easy, use ng-if: <div ng-controller="ParentCtrl"> <button ng-click='loadChild=true'>CLICK TO INIT CHILD CTRL</button> <div class="child-container" ng-if='loadChild'> <div ng-controller="ChildCtrl" ng-include="'templates/child.html'" /> </div> </div> ng-if directive does not load the DOM unless the expression is true....

How to use Ionic Popup with scope in Controller As syntax?

javascript,angularjs,ionic,angularjs-controller

In that example they inject $scope so they can assign it as the scope property in the popup show options. Maybe if I clear up what the "controller as" syntax is actually doing, you won't feel like it's so messy :) When you do ng-controller="myController as ctrl", all you're doing...

Can an Angular controller bind to multiple parts of a web page?

javascript,html,angularjs,angularjs-controller

You can create a shared service and inject into both controllers. This can be achieved by either the factory or service pattern. See SO post angular.service vs angular.factory for some insight on the difference/similarity between the two. This is the Angular way to do this. See the AngularJS services docs...

Function in AngularJS controller not being called

angularjs,angularjs-controller,angularjs-ng-click

Your order of dependency injection is wrong. hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) { Should be hello.controller("HelloCtrl", ["$http", "$scope", function($http, $scope) { The order of parameters must be the same order as the array of names....

Pass Data $http.post From AngularJS and ASP.net MVC gets null

c#,asp.net-mvc,angularjs,angularjs-directive,angularjs-controller

Pass your object directly as an object rather than stringifying it. As it's being passed right now, it's a string, not an object that can properly be deserialized. $http.post("Cars/AddCar", $scope.new.JsonCar).success(function (data) { Alert(ok) }) Create a Car object that matches your payload. The serializer will handle your JSON object for...

Submitting Form in AngularJS and MVC 4

angularjs,asp.net-mvc-4,angularjs-controller,angularjs-factory

per the comments, /register was referencing the wrong controller. changed this: .when('/register', { templateUrl: 'Account/Register', controller : 'LoginController' }); to this: .when('/register', { templateUrl: 'Account/Register', controller : 'RegisterController' }); ...

Testing variable binding using Controller As syntax

angularjs,jasmine,angularjs-controller

Start by instantiating the controller: ctrl = $controller('LoginFormCtrl'); Angular will inject the AuthService. There is no other dependency to inject in the controller, so passing a scope or login_details won't work. Then set its login_details: ctrl.login_details = { username: 'test1', password: 'password1' }; Then call the function to test: ctrl.login();...

Angular watching Service properties

javascript,angularjs,angularjs-service,angularjs-controller

When you assign the value of SomeService.value to your scope variable, you are creating a copy of the variable which is a distinct object from the value inside SomeService. By adding the watch expression you were simply keeping the two variables (the one in the scope and the one in...

Dynamic update of ng-include through controller and directive Angualar-js

angularjs,angularjs-directive,angularjs-controller,angularjs-ng-include

Because you are initiating this thing with a normal element on click, It doesn't invoke the digest cycle. Add $scope.$apply() after $scope.tab=newTab;

How to keep entered data of page1 after navigating back from page2 in AngularJS

html,angularjs,angularjs-service,angularjs-routing,angularjs-controller

I'd suggest you to use service, that will act as sharable resource between the different controllers. You need to do some changes in your code. You need to move all the static to either service or angular constant. Use dot rule while binding object that will udpate your binding automatically....

AngularJS Controller instance method

javascript,angularjs,angularjs-directive,angularjs-controller

The problem has been resolved. UPDATE AND FIXED: Okay so I have looked into this problem. I should actually update the problem. It actually looks more like this: function SomeCtrl($scope) { this.some_field = "1234"; this.scope.externalMethod = angular.bind(this, this.externalMethod); this.scope.anotherMethod = angular.bind(this, this.anotherMethod); return this; } SomeCtrl.prototype.externalMethod = function() { //Do...

Angular custom directive: a strange error occurs when set controller attribute to `function(scope){}`

A very good practice is to separate every component in a separate file, so I would start by putting your controller in a file like that : //File recursionHelperController.js (function() { 'use strict'; angular .module('app.controllers') .controller('RecursionHelperController', RecursionHelperController); RecursionHelperController.$inject = ['$scope']; function RecursionHelperController($scope) { //do your stuff } })(); Note that...

Controllers and directives, precedence

angularjs,angularjs-directive,angularjs-service,angularjs-controller

Directive will initialise when app is loaded and user opens the page where that directive is, if you have some property that is set later (from api for example), it will update that property in directive but that directive will not be reinitialised ($scope.partic({code: $scope.athid}) wont be called). If you...

Pass variable from directive to controller

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-controller

As you want to access currentScriptPath in your directive controller. You need to only attach that variable into your current scope inside link function of directive & that scope would be make currentScriptPath available to you controller TestController scope because you have used bindToController: true, in your directive. Markup <div...

Does polluting the $scope object affect performance?

angularjs,angularjs-scope,angularjs-controller

Yes, Polluting $scope does affect performance, but its depends your scope has multiple watchers which are frequently changing then that will create a more overhead cost. Refer this answer which has covered same point For avoiding this situation I'd suggest you to do good re-factoring of code Handle all the...

Communicating between controllers in AngularJs

angularjs,twitter-bootstrap,angularjs-directive,angularjs-scope,angularjs-controller

Use service to share data between controllers Your case is trying to share data between controllers, rather than watch service's value in controllers, I think directly reference service object to controller's scope is a better way So your view can be <pre ng-controller="cntrl1">Value in cntrl1: {{ myService.value }} <button ng-click="update('value1')">Change...

AngularJS popover bind to controller variable

The real problem here is that the popover-template directive using a template which route is stored as a string in a $scope variable (as suggested by @kpentchev in the comments of the other answer) is available only with the angular-bootstrap version 0.13.0. That version is not available in npm yet,...

Assigning controller to a form template with $routeProvider in AngularJS

angularjs,angularjs-directive,angularjs-scope,angularjs-controller

You need to include ngRoute module into your application, it's not shipped by default: <head> <script>document.write('<base href="' + document.location + '" />');</script> <script src="/static/js/lib/angular.min.js"></script> <script src="/static/js/lib/angular-route.min.js"></script> <script src="/static/js/lib/angular-resource.min.js"></script> </head> Note, that you also need to define base href tag, since you are using HTML5 mode. Then define module with necessary...

Setting up watches in Angular controller vs. more complex template

There is no ideal answer. With your soluton #2 (you say go drawn towards #1 but actually implemented #2), your directive becomes dependant on the SampleSort service, which is fine if you don't intent to reuse it in different contexts (such as bind it to a differet SampleSort, or some...

Injecting a Angular service into controller results in $injector:unpr error (using AngularBooter)

angularjs,jasmine,karma-jasmine,angularjs-controller,angularjs-http

Two problems: 1) You are booting before you register your stuff (at least in the code you provided). Do emp.boot() right at the bottom after everything has been defined. 2) Your service is not returning anything. For instance, if you add return {}; at the very bottom of your service...

$http.get is undefined when $http is used outside angular code

Try to inject $http in the testMethod function.. like this testMethod($http). Also, I think you have spelling mistake in this line: <script src="specs/TestSpec.js.js"></script> it should be like this: <script src="specs/TestSpec.js"></script> ...

angularjs service - controller - view data binding

angularjs,angularjs-scope,angularjs-service,angularjs-controller

You are updating the variable locationDone defined in the scope of the service. It will not have any impact on the object that you have returned during in the service (when updated later). Instead predefine an object in your service and update the property on the reference rather than a...

Passing values to ng-model from ng-repeat

angularjs,angularjs-scope,angularjs-ng-repeat,angularjs-controller

I guess ng-init should help you out here. Change your code segment from: <div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1"> <input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.code" readonly="" /> </div> to: <div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo:...

Factory undefined inside Controller Method

angularjs,angularjs-controller,angularjs-factory

The error message you are getting appears to be correct. $scope.lines does not exist in your factory but in your controller. So what you might have intended to do would be to pass that value in from the controller to the factory like the below function in controller config.updateLines($scope.lines); function...

angular order with directive

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-controller

Here is what you want . I did this on Basis of your Plunker Code. The thing which you want can be achieved using Angular Events($broadCast & $emit i.e. Controller to Controller communication using angular.) var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { //exactly gets called after event has been...

angular js call a method for a controller inside another controllers method

angularjs,angularjs-scope,angularjs-service,angularjs-controller

Sharing a function is a clear sign you need a service. Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app. I believe you already have angService in place for this. Inject this service in...

Can we access user input value in customfilter.Trying to access user input number from controller or directly in customfilter

javascript,angularjs,angularjs-scope,angularjs-controller,angularjs-filter

Instead of: var x = document.getElementById("myNumber").value; You should do: $scope.filter = { value: 2 }; And instead of: document.getElementById("demo").innerHTML = x; You should do (in the HTML): <input type="number" id="myNumber" ng-model="filter.value"> <p id="demo">{{ filter.value }}</p> You don't need the button or the condEqual function, Angular two way databinding will update...

AngularJS - Error: [ng:areq] Argument 'CustomersController' is not a function, got undefined

angularjs,angularjs-scope,angularjs-routing,angularjs-controller

You are probably either not defining your controller in the global namespace or not defining your controller early enough. Check to see if you're defining the controller in the global namespace by looking at window.CustomersController. window.CustomersControllershould be your controller function. If you're not defining your controller in the global namespace...

Unable to boradcast event from parent controller in angularjs

From the comments: I would bet the reason is that the child controller is not loaded yet when the event is broadcasted - so there is noone there to listen. And it seems to be verified: before I broadcast the event, I am writing to console "broadcasting" & on the...

AngularJS: tracking which checkbox is checked

javascript,angularjs,checkbox,onchange,angularjs-controller

First thing you are missing is, you should write the addType function inside scope in order to fire it on change of checkbox(because you use ng-change directive that will lookup for function inside current scope) You could get ng-change event inside your controller and do simple forEach on object. CODE...

AngularJS - passing variable to scope (from directive to use it in controller) not working

angularjs,angularjs-directive,angularjs-scope,angularjs-controller

The recommended way to share data between directives and controllers is by using a Service, you can create one by using the factory method: var app = angular.module('plunker', []); app.factory('SharedService', function() { return { sharedObject: { value: '', value2: '' } }; }); And then you may inject your SharedService...

calling controller method with bind variables in angularJS

javascript,angularjs,angularjs-scope,angularjs-controller

You do not perform interpolation ({{...}}) for the scope properties passed in, the properties of the scope passed in as argument will automatically get evaluated against the scope. Otherwise it will result only in parse error. So just do:- data-ng-click="hideDtls(one , two)" also you have syntax error in your function...

AngularJs factory function undefined in controller

angularjs,asynchronous,angularjs-service,angularjs-controller,angularjs-factory

You must be getting .then of undefined error Because you missed to return promise from service method. Service var MessageFactory = { getCast: function() { var request = { method: "GET", url: spHostUrl + "/_api/web/Lists/getByTitle('" + listTitle + "')/items?$select=AuthorId,Author/Name,Author/Title,Type_x0020_message,Title,Modified,Body,Expires,Attachments&$expand=Author/Id", headers: { "Content-Type": "application/json;odata=verbose", "Accept": "application/json;odata=verbose" } }; return $http(request)...

How to Bind Data Of angular-Charts Dynamically

javascript,json,angularjs,charts,angularjs-controller

Your problem solution is very simple. The fileContent which you are getting using "on-read-file" directive, it returns the fileContent in string format. anguar-charts data property shpuld always be in JSON format Only you need to do JSON.parse() recieved $fileContent to JSON. Code $scope.showContent = function($fileContent) { $scope.widget.data = JSON.parse($fileContent);; };...

How to call function in controller in angularjs?

angularjs,angularjs-scope,angularjs-controller,angularjs-ui-router

You issue is you are calling a function before making declaration of it. .controller('repeatCtrl', function($scope,$state,$stateParams) { $scope.itemDetails = function(id) { // function body here!! alert(id); }; if($stateParams.id && $stateParams.id != ""){ //Here i want to call itemDetails function $scope.itemDetails(id); }; }) ...

AngularJS: Controller inheritance using call (or apply)

angularjs,angularjs-controller,angularjs-factory

Your solution works more or less like this: app.factory('mixinBaseController', function(myService) { return function (scope, variable) { angular.extend(scope, { variable: variable; method: function() { myService.doSomething(variable); } }); }; }) .controller("ChildController1", function($scope, mixinBaseController) { mixinBaseController($scope, "variable1"); }) .controller("ChildController2", function($scope, mixinBaseController) { mixinBaseController($scope, "variable2"); }); Can you see? By your .call($scope, ...) is...

issue with Angularjs 1.3 new controller as syntax and directive

angularjs,angularjs-directive,angularjs-scope,angularjs-controller

In your plunker remove the $curDir Try using the console in chrome or something next time. Got error: Error: [$injector:unpr] Unknown provider: $curDirProvider <- $curDir <- mainCtrl http://plnkr.co/edit/NrThd1?p=preview As side note: if you see binding expressions {{ }} in your HTML then usually AngularJS has exploded with an error in...

Running AngularJS test for controller after changing $scope to this

angularjs,angularjs-scope,karma-jasmine,angularjs-controller

When you place phones as a property of your controller instance you need to test that, not the scope directly. So just use the controller instance returned by the $controller service and set you expectation against that. it("should create 'phones' model with 3 phones", inject(function ($controller) { var ctrl =...

Update Angular ion-view in another controller

angularjs,angularjs-controller,angularjs-factory

In general in AngularJS if you want to communicate between controllers you should use a service. Create a service and have each of your controllers (geo and date) set values in the service that would then control the value it returns to the SunListCtrl that you use in the ng-repeat....

AngularJS — Passing object/object property to be $watched into $scope.$watch

javascript,angularjs,angularjs-scope,angularjs-controller

As $scope.$watch documentation states watchExpression is called multiple times (even in one digest cycle), but if you passed object there and you change this object to another then it will not work. That is why it is better to pass string watchExpression $scope.$watch('object', function() {...} ) or change what is...

I am trying to understand AngularJS's controllerAs syntax

angularjs,angularjs-scope,angularjs-controller

It should be app.controller('firstController', ['$scope', function($scope){ $scope.name = "Tim"; }]); Also, controllerAs syntax is synthetic sugar for the scope simply, you avoid using this: <div ng-controller="oneCtrl"> {{name}} </div> And instead use this: <div ng-controller="oneCtrl as one"> {{one.name}} </div> Which helps tremendously when you have nested controllers....

How to initialize form as scope variable in controller

form directive does publish the name of the form to the scope. But if the form is nested inside the ng-controller element, then the form's scope variable is not yet available when the controller function runs. As an illustration: <div ng-controller="OuterCtrl"> <form name="form1"> <div ng-controller="InnerCtrl"></div> </form> </div> The following would...

multiple controllers and files in angularjs

javascript,angularjs,angularjs-controller,angularjs-module

when u use angular.module('MainControllers', ['ui.bootstrap']) will override the previous module you define with MainControllers name. you need only one definition of the module so u can do like this, angular.module('MainControllers', ['ui.bootstrap']) .controller('DemoOneController', function($scope, $rootScope, $modal, mainService) { angular.module('MainControllers') .controller('DemoTwoController', function($scope, $rootScope, $modal, mainService) { angular.module('MainControllers') .controller('ModalDemoCtrl', function ($scope, $modal,...

List dependencies injected

In your controller, if you inject $window, you can dig for the dependencies, specifically, there exists a .requires on your module. To do this, you can either declare your module as a global var so we can find it on our $window, in this case, let's call it app -...

Trigger $modal.open from app.js

javascript,angularjs,angularjs-scope,angularjs-controller,angularjs-provider

The solution to his problem was a solution to fixing the Circular dependency error or Cdep. The fix was to explicitly inject $modal using $injector. Solution looks like the one below - responseError: function(rejection) { // Return the promise rejection. switch (rejection.status) { case 404: console.log('Destinaion not found!') break; default:...

How can I add a directive from a module to a controller?

javascript,angularjs,angularjs-scope,angularjs-controller,angularjs-factory

The myCustomer directive is now on the Controller controller No, not at all. It has nothing to do with the controller. It just happens to expect a customer variable in the scope, and the controller happens to set such a variable in its scope. But you can use the...

Use 1 method for all the function short down to one function in angularjs

You could achieve this by creating factrory and place this method inside there, and access this method by injecting factory dependency app.factory('DataService', fucntion($http){ var baseUrl = "http://www.somewebsite.com/api"; var getData = function(extendedUrl, successCallback, errorCallback){ return $http.get(baseUrl + extendedUrl).success(successCallback).error(errorCallback); } return { getData: getData } }); Controller module.controller('directoryCategoryListing', function($scope, $http, $rootScope, DataService)...

On view call other controllers http request getting triggered automatically

angularjs,angularjs-routing,angularjs-controller

Make sure the controller is not being instantiating in your html with ng-controller.

Updating directive based on change in service value AngularJS

javascript,angularjs,angularjs-service,angularjs-controller

maybe angular event broadcasts? add rootScope to service and broadcast an event on name change: app.service('nameService', ['$http','$rootScope', function($http,$rootScope) { this.name = "TestName"; this.setName = function(name) { this.name = name; $rootScope.$broadcast('nameService-nameChanged'); }; this.getName = function() { return this.name; }; }]); and then bind to that event on your directive controller scope:...

Need to stop ongoing operation when controller becomes background (or invalid)

angularjs,controller,routing,angularjs-routing,angularjs-controller

I think you are mentioned ng-controller on the body tag or the parent of your ng-view, In your case you should load the controller from your $routeProvider that will handle it, Config app.config(function($routeProvider) { $routeProvider .when('/view1', { templateUrl: 'view1.html', controller: 'view1Ctrl' //load specific controller from here }) .when('/view2', { templateUrl:...

Angular minification with directive controller?

javascript,angularjs,angularjs-directive,minify,angularjs-controller

It can be resolved by using explicit dependency annotation. What you have it implicit annotation which causes issues while minification. You could use $inject or inline array annotation to annotate the dependencies in the directive as well. MyController.$inject = ['$scope', '$somethingelse']; function MyController($scope, $somethingelse) { // Contents of controller here...

my Controller is working fine but Directive is not

javascript,angularjs,angularjs-directive,angularjs-controller,angularjs-compile

It looks like you have a syntax error in your directive where dropDownController should be a string like this: app.directive('DropDownDirective', function () { return { restrict: 'E', templateUrl: 'AddressControl', controller: 'DropDownController', replace:true, } }); Not sure why you wouldn't get an error message for that though......

Adding directive inside the directive programatically

To understand angular new element has been inserted you need to first compile that element using $compile service like $compile(div)($scope) then only you can append that element in Angular DOM. And you directive has already rendered on html, so the div structure is changed. instead of doing $('#testCol') use angular.element('#testCol...

Communicate to another, specific controller