AngularJS, access to deeply buried osprey elements

Question

I didn’t find it in the documentation, I also found it in Google (maybe I couldn’t correctly formulate the question in English)

There is a controller with a deep ensemble. Such

{ user:{ sm:{ general:{ app:[], rights:[], phone:'', options:{ .... } } } } }

I want to fill in the template starting from user.sm.general.options and really do not want to insert this very long prefix everywhere.

Dreaming of something like (ng-use is from the ceiling)

 <ng-use="user.sm.general.options as opt"> логин: {{opt.login}} пароль: {{opt.pass}} роль: {{opt.role}} </ng-use>

ng-init does practically what is necessary, but it is easier to save the desired object to a variable inside the controller itself and use it
In the template write <difv ng-init="opt = user.sm.general.options"> логин: {{opt.login}} пароль: {{opt.pass}} роль: {{opt.role}} </ng-use> .
By the way, there is an option to write the directive ng-use
@StepanKasyanenko issue a reply please and I will immediately accept it

Accepted Answer · 2016-08-26T10:31:51

As @Grundy said, there are two options.

In template write

 <div ng-init="opt = user.sm.general.options"> логин: {{opt.login}} пароль: {{opt.pass}} роль: {{opt.role}} </div>

Or in the controller $scope.opt=user.sm.general.options .

By the way, there is an option to write a my-use directive.

 angular.module("ExampleApp", []) .controller("ExampleController", function($scope) { $scope.user = { sm: { general: { app: [], rights: [], phone: '', options: { login: "53453", pass: "sfsdf", role: "adm" } } } }; $scope.optController = $scope.user.sm.general.options; }) .directive("myUse", function() { return { restrict: 'AE', scope: { in : "=", out: "@" }, replace: false, transclude: true, template: "<span ng-transclude></span>", link: function(scope) { scope.$$childHead[scope.out] = scope.in; } } });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="ExampleApp" ng-controller="ExampleController"> <h2>Использование директивы. Свойство <code>opt</code> создается в дочернем $scope(id={{$id}}).</h2> opt = {{opt|json}} <my-use in="user.sm.general.options" out="opt"> <div>логин:{{opt.login}}</div> <div>пароль: {{opt.pass}}</div> <div>роль: {{opt.role}}</div> <div>$scope(id={{$id}})</div> </my-use> <h2>Использование <code>ng-init</code>. Свойство <code>optInit</code> создается в общем $scope(id={{$id}})</h2> optInit = {{optInit|json}} <div ng-init="optInit = user.sm.general.options"> <div>логин:{{optInit.login}}</div> <div>пароль: {{optInit.pass}}</div> <div>роль: {{optInit.role}}</div> <div>$scope(id={{$id}})</div> </div> <h2>Использование инициализации в контроллере. Свойство <code>optController</code> создается в общем $scope(id={{$id}})</h2> optController = {{optController|json}} <div> <div>логин:{{optController.login}}</div> <div>пароль: {{optController.pass}}</div> <div>роль: {{optController.role}}</div> <div>$scope(id={{$id}})</div> </div> </div>

An example on jsfiddle .

I think because transclude creates another child isolated scope .

AngularJS, access to deeply buried osprey elements

1 answer 1

More articles: