Get an element from a template that is configured as ng-view template?

Question

var shop = angular.module("shopStore",['ngRoute']);
shop.controller('productsList',function($scope){
    $scope.stock = [
        {type: "motherboard",model: 'AM1I',company: 'MSI'},
        {type: "motherboard",model: ' A88XM-PLUS/CSM FM2', company: 'MSI'}
    ];

});
shop.config(function ($routeProvider){


    $routeProvider.
        when('/', {
            controller: 'productsList',
            templateUrl: "partials/home.html"
        }).
        when('/products', {
            controller: 'productsList',
            templateUrl: "partials/products.html"
        }).
        when('/cart', {
            controller: 'productsList',
            templateUrl: 'partials/cart.html'
        })
    });

    var x = document.querySelector('#elem');
    console.log(x);
    // Doesn't work, it doesn't work with all the others.

the products arrangement doesn't matter, I have another file with all the information, it is just to let you know the structure

<b><div id="elem"></div></b>

<div id="stock" ng-repeat="products in stock" ondrag="part.drag(this)">

    <div class="image">
        <a href={{products.link}}>
            <img ng-src={{products.picture}} title{{products.company}} width="70px">
        </a>
    </div>

    <div class="type">{{products.type}}</div>

    <div class="company">{{products.company}}</div>

    <div class="model">{{products.model}}</div>

    <div class="button1"><button ngclick="add(product)">Add</button></div>

    <div class="buttonInput">
        <input type="button" onclick='Shoping.remove(this)' value="X">
    </div>

</div>

When I try to call any of the elements in the partials html with document by ID or querySelector it doesn't work; what should I write to get the element from a ng-view template?

The js is on the top and the template html is at the bottom it is for regular usage, not in angular js

You might need to give some example code so that your question is more clear. — Jeremy Ninnes, Nov 21 '14 at 01:07
Your are using undefined variables in your controller (products). You also need to share main and partial views, to show how you are using scope vars. If products should be coming from a service, there are even more questions you should answer with your code. — alou, Nov 21 '14 at 09:53
i need to use it only for javascript usage not for angular usage — Ilan, Nov 21 '14 at 09:55

score 0 · Answer 1 · edited May 23 '17 at 12:08

The following adds dynamically created variables to the $scope object, making the variables available to the controller. The variables are added to the main app page by the ng-view tag.

AngularJS

var app = angular.module('myApp', ['ngRoute', 'ngResource']);
app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            controller: 'productsList',
            templateUrl: "partials/home.html"
        }).when('/products', {
            controller: 'productsList',
            templateUrl: "partials/products.html"
        }).when('/cart', {
            controller: 'productsList',
            templateUrl: 'partials/cart.html'
        })
});
app.controller('MainController', ['$scope', function ($scope) {
        $scope.stock1 =[ {type: "motherboard",model: 'AM1I',company: 'MSI'},
            { type: "motherboard",model: ' A88XM-PLUS/CSM FM2', company: 'MSI' }               
            ] ;

        //The following is where the magic is realized!
        //**var 'directiveElement' locates the dynamically created variable. 
        //Id 'item0' is the first span Id dynamically created by the stock-scope object's 
        //'template' attribute**
        var directiveElement = angular.element(document.getElementById('item0'));

    });
}]);
app.directive('stockScope', function () {//name 
    return {
        restrict: 'E', //'E' matches only names in elements
        replace: true, //will replace the stock1 $scope object declared above once 
                      //it is matched to it, in this case we are using the 
                      //html '<stock-scope stock="stock1"></stock-scope>'
                     //to match it to the directive parameter of 'stock' declared below         
        scope: {
            stock: '='
        },
        template: '<p><span id="item{{index}}" ng:repeat="(index, item) in stock">'
                  + '{{item.type}}, {{item.model}}, {{item.company}} <br /></span></p>'
    };
});

HTML

<!-- add the following html to the partials/products.html -->
<stock-scope stock="stock1"></stock-scope>

Also, make the starting app html page to include the ng-view tag,

<html ng-app="myApp">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-resource.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <div ng-view></div>
    </body>
</html>

Research Links

https://docs.angularjs.org/guide/directive
How to use `replace` of directive definition?

Get an element from a template that is configured as ng-view template?

1 Answers1