I have the following HTML code with directive Angular JS:
<div ng-controller="SongsController">{{genres}}</div>
Controller:
.controller('SongsController', ['$scope', '$http', 'songsService', 'customFunctions', '$timeout', '$activityIndicator', '$confirm', 'genresService', '$filter', 'UploadFilesHash', 'loader', function ($scope, $http, songsService, customFunctions, $timeout, $activityIndicator, $confirm, genresService, $filter, UploadFilesHash, loader) {
genresService.get(function (data) {
$scope.genres = data;
});
}]);
Related
I have easy service in my app.
var app = angular.module("appTest", []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log("service")
};
});
And I want to use it in my controller
var app = angular.module('appTest');
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
But I have mistake http://prntscr.com/mckff7
I did my service by any case. Result the same.
I add my service by this way http://prntscr.com/mckgrt
You're not 'injecting' the AuthService into your controller. You're receiving it as an object, but you need to declare it in the array of strings too for it to actually be injected.
Your controller code should look like this:
var app = angular.module('appTest', []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log('hello world');
};
});
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location', 'AuthService',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
I have a controller called UserCtrl and it depends on a service called UserService. When the view that uses the controller UserCtrl loads I get an error:
Unknown provider: UserServiceProvider
Here is my service code:
angular.module('UserService', []).service('UserService', ['$rootScope', '$route', '$http', '$filter', function ($rootScope, $route, $http, $filter) {
function loadType() {
var deferred = $q.defer();
$http.get('json/type.json').success(function (response) {
var typeoflaw = response;
}).error(function (status, data) {
console.log("error trapped");
});
deferred.resolve(typeoflaw);
return deferred.promise;
};
}]);
Here is my controller code:
JBenchApp.controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', 'UserService',
function ($scope, $routeParams, $http, $filter, UserService) {
// Get the preferences information
UserService.loadType()
.then(function (lawtypes) {
$scope.typeoflaw = lawtypes;
});
$scope.SavePreferences = function () {
};
}]);
What did I do wrong?
EDITED TO SHOW JBenchApp code:
var JBenchApp = angular.module('JBenchApp', [
'ngRoute',
'UserService'
]);
This brings to mind a question that has bugged me. What order do you declare your JS files for angular in the index.html page? Mine are currently:
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/app.js"></script>
<script src="../js/services.js"></script>
<script src="../js/controllers.js"></script>
<script src="../js/directives.js"></script>
May be try this
angular.module('UserService').controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', 'UserService',
function ($scope, $routeParams, $http, $filter, UserService) {
//controller code here
}]);
This is the view code:
<a type="button" ui-sref="index.usermng.userInfo" ng-click="checkUserInfo(item.id)" class="btn btn-primary">check</a>
Controller:
//UserManage Controller
userApp.controller('userCtrl', ['$scope', '$http', '$location', 'serverUrl', function($scope, $http,
$scope.checkUserInfo = function(userId) {
console.log(userId);//I can get userId in here
$scope.$broadcast('toUserInfo',userId);
}
}]);
//UsrInfo Controller
userApp.controller('userInfoCtrl', ['$scope', '$http', 'serverUrl', function($scope, $http, serverUrl) {
$scope.$on('toUserInfo',function(data){
console.log("in.....");
console.log(data);
})
How to get the 'userId' from 'userCtrl' in 'userInfoCtrl'?
Using rootScope to communicate between controllers
userApp.controller('userCtrl', ['$scope', '$http', '$rootScope',
function($scope, $http,$rootScope) {
$scope.checkUserInfo = function(userId) {
console.log(userId);//I can get userId in here
$rootScope.$broadcast('toUserInfo',userId);
}
}]);
Now the userInfoCtrl can get the userId from userCtrl.
I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/
I have the following:
<div data-ng-controller="Controller1">
<div class="button"
data-ng-click="action2()">
</div>
</div>
<div data-ng-controller="Controller2">
</div>
angular.module('test')
.controller('QuestionsStatusController1',
['$rootScope', '$scope',
function ($rootScope, $scope) {
}]);
angular.module('test')
.controller('QuestionsStatusController2',
['$rootScope', '$scope',
function ($rootScope, $scope) {
// I need some way to receive the action2()
}]);
Is there a way I can make a click in the HTML of Controller1 cause a method to fire in Controller2. Note that I do not have a parent controller to either of these controllers. That's due to the fact I am using ui-router.
angular.module('test')
.controller('QuestionsStatusController1',
['$rootScope', '$scope', '$resource', '$state',
function ($rootScope, $scope, $resource, $state) {
$scope.action2 = function() {
$rootScope.$broadcast('action2#QuestionStatusController1');
}
}]);
angular.module('test')
.controller('QuestionsStatusController2',
['$rootScope', '$scope', '$resource', '$state',
function ($rootScope, $scope, $resource, $state) {
$rootScope.$on('action2#QuestionStatusController1', function {
//write your listener here
})
}]);