I am new to angularjs, I know that $scope represent a connection between the controller and the view, But is there a way besides looking for class="ng-scope" to get the scope element, I mean something like that:
function someControllerFunc($scope){
$scope.element;
}
I know that same controller can be assigned to multiple scopes, So maybe it is not possible.
You can pass in the element to the controller, just like the scope:
function someControllerFunc($scope, $element){
}
$element is not a good way to access the element, and is being depricated. You probably want to use a directive for this.
$element being deprecated in any of those comments... I need to know whether it's going to be deprecated because we use it in our app in several places, so I'd want to watch out for that when we upgrade....
$compile service to bind elements with controllers. I agree, it's a messy and non-elegant solution, but programming is full of those, right? =)$element is one of four locals that $compileProvider gives to $controllerProvider which then gets given to $injector. The injector injects locals in your controller function only if asked.
The four locals are:
$scope$element$attrs$transcludeThe official documentation: AngularJS $compile Service API Reference - controller
The source code from Github angular.js/compile.js:
function setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope) {
var elementControllers = createMap();
for (var controllerKey in controllerDirectives) {
var directive = controllerDirectives[controllerKey];
var locals = {
$scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope,
$element: $element,
$attrs: attrs,
$transclude: transcludeFn
};
var controller = directive.controller;
if (controller == '@') {
controller = attrs[directive.name];
}
var controllerInstance = $controller(controller, locals, true, directive.controllerAs);
I dont know what do you exactly mean but hope it help you.
by this directive you can access the DOM element inside controller
this is sample that help you to focus element inside controller
.directive('scopeElement', function () {
return {
restrict:"A", // E-Element A-Attribute C-Class M-Comments
replace: false,
link: function($scope, elem, attrs) {
$scope[attrs.scopeElement] = elem[0];
}
};
})
now, inside HTML
<input scope-element="txtMessage" >
then, inside controller :
.controller('messageController', ['$scope', function ($scope) {
$scope.txtMessage.focus();
}])
Create custom directive
masterApp.directive('ngRenderCallback', function() {
return {
restrict: "A",
link: function ($scope, element, attrs) {
setTimeout(function(){
$scope[attrs.ngEl] = element[0];
$scope.$eval(attrs.ngRenderCallback);
}, 30);
}
}
});
code for html template
<div ng-render-callback="fnRenderCarousel('carouselA')" ng-el="carouselA"></div>
function in controller
$scope.fnRenderCarousel = function(elName){
$($scope[elName]).carousel();
}
