從配置爲ng-view模板的模板中獲取元素？

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.

產品安排沒關係，我還有一個文件的所有信息，它只是讓你知道的結構從配置爲ng-view模板的模板中獲取元素？

<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>

當我嘗試調用任何的元素通過ID或querySelector文檔部分html不起作用;我應該寫什麼來從ng-view模板中獲取元素？

JS的是在頂部和模板HTML是在底部它是經常使用，而不是在角JS

來源

2014-11-21 Ilan

您可能需要提供一些示例代碼，以便您的問題更加清晰。 – 2014-11-21 01:07:07

您正在控制器（產品）中使用未定義的變量。您還需要分享主視圖和局部視圖，以顯示您如何使用範圍變量。如果產品應該來自服務，那麼您應該使用代碼回答更多問題。 – alou 2014-11-21 09:53:49

我需要使用它僅適用於JavaScript使用而不是角度使用 – Ilan 2014-11-21 09:55:47

下增加了動態創建變量到$範圍對象，使變量提供給控制器。這些變量通過ng-view標籤添加到主應用程序頁面。

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>

此外，還要啓動應用程序的HTML頁面，包括NG-view標記，

<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>

研究聯繫

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

來源

2015-08-19 16:23:27 user3777549

從配置爲ng-view模板的模板中獲取元素？

回答

相關問題