How to access ng-init variables using div DOM element?

Question

in the below code, variables are defined using ng-init directive, angular expression gives the access to those variables,

    <body ng-app="">
        <div ng-init="arr = [1, 2, 3, 4];obj={x:1}">
            {{arr[0]}}
        </div>
    </body>

Using javascript code,

    <body ng-app="">
        <div ng-init="arr = [1, 2, 3, 4];obj={x:1}">
            <script  type="text/javascript">
             //access arr[0] using div DOM object
            </script>
        </div>
    </body>

I learnt that the data is directly binded to view(DOM).

To know the under-hood working of ng-init directive, How do I access arr[0] using div DOM element?

As has been mentioned by multiple people, this is an anit-pattern. The documentation for `ng-init` clearly states that you should use a controller to initialize your variables whenever possible. Instead, you are trying to *not* initialize them in the controller, but use them there anyway (which makes no sense). On top of that, `ng-app=""` isn't even a valid way to bootstrap angular in any of the current supported releases. — Claies, Jan 10 '16 at 20:49
perhaps if you described what problem you are trying to solve inside that ` — Claies, Jan 10 '16 at 20:52
that question doesn't explain what you are trying to do here. Not only was that question and answer written two years ago, it was also written against a completely deprecated version of angular. On top of that, it **still** doesn't explain what the ` — Claies, Jan 10 '16 at 20:57
To me, this feels like you are not really clear about how the angular framework functions and how to apply it's methods to the problem you are trying to solve. If you can explain your problem, instead of your attempted solution of using `ng-init`, perhaps we can show you the [angular way](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542#15012542) to solve the problem. — Claies, Jan 10 '16 at 21:02
@Claies which problem are you talking about? Please read my edited question — Amir Shah, Jan 10 '16 at 22:09
I have read every edit. You are asking how to use something for a purpose it wasn't designed for, and haven't provided a single line of the code inside the script block to explain why. — Claies, Jan 10 '16 at 22:16

score 0 · Answer 1 · answered Jan 10 '16 at 19:39

0

You can access it only in controller. The code inside controller will look like this:

var value = $scope.arr[0];

answered Jan 10 '16 at 19:39

Roman Hutnyk

1,549
9
14

score 0 · Answer 2 · answered Jan 10 '16 at 19:47

You need to add angular components to your app. First add the module of your app and than add the controller of this scope.

<html>
    <body ng-app="App">
            <div ng-controller="mainCtrl" ng-init="init()">
                {{arr[0]}}
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
            <script  type="text/javascript">
                var app = angular.module('App',[]);
                app.controller('mainCtrl', ['$scope', function($scope) {
                  $scope.arr = [];
                  $scope.obj = {};
                  $scope.init = function(){
                    $scope.arr = [1, 2, 3, 4];
                    $scope.obj={x:1};
                  };

                }]);  
                  
            </script>
           

    </body>
</html>

How to access ng-init variables using div DOM element?

2 Answers2