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

製品の配置は関係ありません。すべての情報を含む別のファイルがあります。構造を知らせるためだけです。

<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 で document を使用してパーシャル html の要素を呼び出そうとすると、機能しません。ng-view テンプレートから要素を取得するには、何を書く必要がありますか?

js は上部にあり、テンプレート html は下部にあります。角度 js ではなく、通常の使用のためです。

4

1 に答える 1

0

以下は、動的に作成された変数を $scope オブジェクトに追加し、変数をコントローラーで使用できるようにします。変数は、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
ディレクティブ定義の「置換」を使用するには?

于 2015-08-19T16:23:27.027 に答える