How to Programming with Angularjs-controller

javascript,html,angularjs,angularjs-controller

Please don't use this kind of declaration. Kindly use module based declaration. ng-app does not recognize a name, which is needed. var app = angular.module('app', []); app.controller('NameCtrl', ['$scope', function($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; }]); Demo : http://plnkr.co/edit/LOHXR6DrH2o7YtfnCX8G?p=preview...

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

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...

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); }); ...

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...

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

javascript,angularjs,ionic,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...

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

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...

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();...

I am trying to understand AngularJS's controllerAs syntax

angularjs,twitter-bootstrap,angularjs-directive,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....

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,...

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

angularjs,angularjs-controller,angularjs-templates

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....

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....

How to initialize form as scope variable in controller

angularjs,angularjs-scope,angularjs-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...

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...

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...

Accessing parent scope working without ui-router

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

You should follow dot rule while defining ng-model to avoid $parent annotation. By following dot rule you could get the prototypically inherited scope inside your child controller. Markup <p>Something should appear below on click: </p> <div class="hero-banner-error" data-ng-show="model.errorBanner"> <p>{{ model.myMessage }}</p> </div> Controller app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.model...

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...

multiple controllers and files in angularjs

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,...

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

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);//<--...

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

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

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) {...

Inject sub module to main 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...

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:...

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 can I add a directive from a module to a controller?

javascript,angularjs,angularjs-service,angularjs-controller

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...

set/get data in service from controllers

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 =...

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....

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

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

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> ...

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:...

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;

AngularJS polling service not continuously updating controller

angularjs,angularjs-scope,angularjs-ng-repeat,angularjs-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)...

Passing values to ng-model from ng-repeat

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:...

Angularjs undefined variable in controller

javascript,angularjs,undefined,angularjs-controller,angularjs-factory

Is my error, i call in another controller User.get();, My problem is in time app.controller('Controller', function ($scope, User) { $scope.user = User; setTimeout(function(){ console.log(user.data); // i have data }, 5000); }); ...

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...

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...

Setting up watches in Angular controller vs. more complex template

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

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...

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....

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...

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...

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...

List dependencies injected

javascript,angularjs,angularjs-controller,angularjs-module

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 -...

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...

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...

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"; }); ...

controllerAs with directives and isolated scope

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

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 Expression while referencing multiple variables and filters

1) So... state.statename if I understand is looking for the word "state" in state names: No. state.statename means there is a variable named state, which previously has been assigned an object, and the object has a key named statename. For instance: var state = { statename: "Indiana", capital: "Indianapolis" };...

Inject percentage filter in controller

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

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...

Why does the controller not work when script is outside index.html?

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

JavaScript will always be parsed as it gets to it in the page. In the case of the script you wrote, it is all going to be run as it is parsed. Having it in the <head> section of your HTML means that none of the DOM exists at the...

angularjs service - controller - view data binding

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...

How to do load page in Angular JS?

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

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',...

Enforce deferring controller logic

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

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)...

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) { //...

Controller being called twice in Ionic (AngularJS)

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

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...

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...

Unable to boradcast event from parent controller in angularjs

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

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...

my Controller is working fine but Directive is not

javascript,angularjs,angularjs-directive,angularjs-controller

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......

initializing ng-app with name disables varibles initialization

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>...

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...

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...

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 {...

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.

Controller not a function got undefined error message angular js

javascript,angularjs,angularjs-scope,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 ...

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

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...

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...

Get value from Directive into Controller

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

You can send a param when you call your callFunc(). Update your func in the ctrl: key.callFunc = function(filterParams), also don't forget to update you passed method call-func="key.callFunc(filterParams) In filter directive change your getData method to: this.getData = function(val) { $scope.callFunc({filterParams: val}) } In positions directive pass the value that...

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);; };...

Communicating between controllers in AngularJs

html,angularjs,angularjs-service,angularjs-routing,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...

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

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....

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

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

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)...

Adding directive inside the directive programatically

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

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...

Angular Contoller is not defined

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...

Communicate to another, specific controller

Put your business logic in a service and share the service with you controllers to avoid code duplication. If you have the same controller methods as well (and a lot of them) , then create a parent controller (or inherit via prototype) with the same logic....

Assigning controller to a form template with $routeProvider in AngularJS

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...

AngularJS — Explicitly returning a value from a controller

angularjs,angularjs-controller,angularjs-factory

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...

Factory undefined inside Controller Method

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...

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...

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 Controller instance method

angularjs,angularjs-directive,angularjs-scope,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...

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

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...

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...

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...

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...

Variable visible in $scope but undefined when actually accessed in Angular

javascript,angularjs,angularjs-scope,angularjs-controller

This might be occurring because you're trying to access the variable even before it's assigned a value by angular. try putting your console statement in a timeout. Avoid using ng-init for initializations. ...

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:-...

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 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); }; }) ...

Inheritance w/ Angular's 'Controller As' vs. $scope

angularjs,inheritance,angularjs-scope,angularjs-controller

There is no reason you can't use the prototype so long as you are OK with losing the ability to have actual private data vs having conventionally private data. Let me explain with code: function MyClass($http){ var privateData = 123, $this = this; $this.getAnswer = function(){ return privateData; }; }...

How to use a service to retrieve data and share it between controllers?

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

I managed to accomplish the desired behavior using $interval as this sample shows: var app = angular.module('plunker', []); app.factory('ServiceData', function(){ return { data: [1,2,3], search: function() { var this$ = this; this$.data = [1,2,3,5,6,6,7,8,9,];} }; }) app.controller('MainCtrl', function($scope, $interval, ServiceData) { $interval(function() { $scope.data_list_1 = ServiceData.data; }, 100); $scope.doSearch =...

Angularjs Uncaught Error: [$injector:modulerr]

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

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...

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

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

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()"> ...

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 =...

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' }); ...

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

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

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...

AngularJS: assign $http.get data to variable

This is because $http.get is asynchronous. So your code is not put on hold until ajax request is complete, instead it will execute the rest of the code. So your second console.log will be executed before the ajax request completes. At this point there is no scope variable called $scope.results,...

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

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...

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:...

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?