I have some HTML that is coming in a string and need the HTML to be rendered. Looking at using the ng-bind-html. That requires $sce to be injected into the controller. All of the example that I can fine have the controller set up like this.
angular.module('mySceApp', ['ngSanitize'])
.controller('MyController', ['$sce'] ...
But I have my controllers set up like this
app.component('myComponent', {
templateUrl: '../template.html',
controller: myController,
Where myController is a separate js file.
Any idea how I am supposed to do this with my setup?
In your separate js file there should be function that reference the controller. just pass it as parameter to that function like this
function myController($sce){
}
Related
I have JS file with simple function on clear JS:
function Alert(){
alert();
}
In another file I have application on Angular JS.
At first connected simple JS file on page and after Angular JS on tags <head>
How I can call Alert() method from controller Angular JS?
Simple JS file:
$(function(){
function leftTimeInit(){
$.each($('.action-loader'), function(index, val) {
initLoader($(this), $(this).data('percentage'));
});
}
});
Angular JS in controller:
leftTimeInit();
I get error:
Uncaught ReferenceError: leftTimeInit is not defined
You shouldn't do DOM manipulations in your controllers. So you should probably rethink how you want to use that function.
Anyway, leftTimeInit is declared in an anonymous function, and only visible there. You can't call it anywhere else. If you want that, you'll have to move it out of $(function(){}) . But as I've said, not recommended.
As for your Alert() example... In Angular you have access to simple JS global functions via $window (of course, they're global and you could access them anyway, but if you use $window you can mock them in tests).
.controller('Ctrl', function ($scope, $window) {
$window.Alert('something');
});
Is there any way that I get regestered controllers name in my angularjs module?
I implement Lazy Loading controller in my sample and I want test my code .
I recommend using an IIFE structure like so:
(function() {
angular.module( 'MyApp', [
'dependency',
]);
a controller function would simply look like this:
function SomeCtrl($scope, ...) {
};
and then at the bottom of your page:
angular
.module('MyApp')
.controller('SomeCtrl', SomeCtrl)
})();
In test cases (e.g. Jasmine), you will be able to access the ctrl by its name.
I am new to AngularJs. I have put a url value in the scope variable inside a controller. This value should be used in the partial file corresponding to the controller inside a javascript function. How can I achieve this in AngularJs.
Code snippet is given below for reference:
Config code:
myApp.config(function ($routeProvider){
$routeProvider.
when('/state-details/:id',
{
controller:'controllers.StateDetailsCtrl',
templateUrl:'/partials/state-details.html'
})
.... More routes defined below...
Inside the controller:
controllers.StateDetailsCtrl= function($scope, $routeParams, $http){
$scope.testURL='http://www.google.com'
.... More values set in the scope..
Inside the state-details partial file:
<script>
// how to get the value of the testURL defined in the scope?
</script>
Please let me know how to get this working?
If you need to add additional javascript into a partial html file, then it just like screams to use a directive.
There you can inherit the whole ctrl scope or create a isolated scope.
https://docs.angularjs.org/guide/directive
From this URL https://github.com/angular/angular-seed/blob/master/app/js/app.js, I got a controller like below.
function WineListCtrl(Wine) {
this.wines = Wine.query();
}
So far what I have been doing in angular is define a controller with $scope getting injected. So i tried, changing the above controller to
function WineListCtrl(Wine, $scope) {
console.log($scope, this)
this.wines = Wine.query();
}
But this is giving an error Error: Unknown provider for '$scope'.
I have three questions here:
Why the $scope of the controller is not injected.
Does this inside the WineListCtrl means the $scope.
Most of the errors in Angular are of the format 'Unknown provider
for XXXX'. What should i look for, if the firebug says so?
You are using "inferred dependencies" (see DI page) which should work fine, unless you minify or obfuscate your JavaScript.
See my answer to this question: 'this' vs $scope in AngularJS controllers
'Unknown provider' errors normally occur when you forget to use ng-app somewhere, or you forget to initialize your app with the appropriate module:
angular js unknown provider
AngularJS linky filter throws an "Unknown Provider" error
When writing your controllers in that form you should inject them with dependencies like so:
function WineListCtrl(Wine, $scope) {
console.log($scope, this)
this.wines = Wine.query();
}
WineListCtrl.$inject = ['Wine', '$scope'];
this is not the same as $scope. $scope is an angular-specific object created with $rootScope.$new()
See #1
I have a route defined as
$routeProvider.when('/:culture/:gameKey/:gameId/closed', { templateUrl: '/templates/tradingclosed', controller: TradingClosedCtrl });
I would like angular to include the "culture" parameter when requesting the template somehow, so I can serve a translated template.
Is this possible?
If I'm reading this correctly you'd like to somehow use the culture parameter from the url route to determine which location to retrieve your template.
There may be a better way but this post describes retrieving the $routeParams inside a centralized controller with ng-include to dynamically load a view.
Something similar to this:
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.when('/:culture/:gameKey/:gameId/closed', {
templateUrl: '/templates/nav/urlRouter.html',
controller: 'RouteController'
});
});
function RouteController($scope, $routeParams) {
$scope.templateUrl = 'templates/tradingclosed/' + $routeParams.culture + '_template.html';
}
With this as your urlRouter.html:
<div ng-include src="templateUrl"></div>
You can define the controller you want to load in your views using ng-controller and access the $routeParams for the additional route parameters:
<div ng-controller="TradingClosedCtrl">
</div>
I've posted similar question with working Plnkr example of solution like #Gloopy suggested.
The reason why you can't implement that without ng-include is that routing is done in 'configuration' block, where you can't inject any values (you can read about these blocks in Modules documentation, section Module Loading & Dependencies
If you want not to introduce new scope, you can replace ng-include with my stripped version of ng-include directive, that do absolutely same that ng-include does, but do not create new scope: source of rawInclude directive
Hope that solution will satisfy your use case.