AngularJS指令隔离范围问题

Question

我是AngularJS的新手，正在尝试组装一个小型演示应用程序。 我要开始工作的部分如下：

用户在与ng-model双向绑定的文本字段中输入股市代码。
指令具有点击绑定功能，可从API检索某些数据。
返回数据后，将编译指令并将其附加到div。
该指令应该通过隔离范围接受文本变量并显示它。 这是无法正常工作的部分。

码

指令

financeApp.directive('watchlistItem', function () {
    return {
        restrict: 'E',
        templateUrl: 'app/directives/watchlistItem.html',
        replace: true,
        scope: {
            asxCode: "@"
        }
    }
});

financeApp.directive('myAddCodeButton', ['$compile', '$resource', function ($compile, $resource) {
    return function(scope, element, attrs){
        element.bind("click", function () {
            scope.financeAPI = $resource('https://query.yahooapis.com/v1/public/yql', {callback: "JSON_CALLBACK" }, {get: {method: "JSONP"}});
            //scope.financeResult = 
            scope.financeAPI.get({q: decodeURIComponent('select%20*%20from%20yahoo.finance.quote%20where%20symbol%20in%20(%22' + scope.asxcodeinput + '.AX%22)'),
                format: 'json', env: decodeURIComponent('store%3A%2F%2Fdatatables.org%2Falltableswithkeys')})
            .$promise.then(function (response) {
                scope.quote = response.query.results.quote;
                console.log(scope.quote);
                angular.element(document.getElementById('watchlistItemList')).append($compile("<watchlist-item asx-code=" + scope.quote.Symbol + "></watchlist-item")(scope));
            }, function (error) {
                console.log(error);
            });
        });
    };
}]);

指令模板

<div class="watchItem">
    <a href="#/{{asxCode}}">
        <div class="watchItemText">
            <p class="asxCodeText"><strong>"{{asxCode}}"</strong></p>
            <p class="asxCodeDesc"><small></small></p>
        </div>
        <div class="watchItemQuote">
            <p class="asxPrice lead"></p>
            <p class="asxChangeUp text-success"></p>
        </div>
    </a>
</div>

的HTML

<html lang="en-us" ng-app="financeApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">

    <title>ASX Watchlist and Charts</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">

    <script src="https://code.angularjs.org/1.4.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.5/angular-route.min.js"></script>
    <script src="https://code.angularjs.org/1.4.5/angular-resource.min.js"></script>
    <script src="app/app.js"></script>
</head>
<body>

    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#/">ASX Watchlist and Charts</a>
            </div>
        </div>
    </div>

    <div class="container-fluid" id="mainContainer">
        <div class="row">
            <div class="floatLeft" id="leftDiv" ng-controller="navController">
                <form class="inline-left">
                    <div class="form-group floatLeft">
                        <label class="sr-only" for="asxinput">ASX Code</label>
                        <input type="text" class="form-control" id="asxinput" placeholder="ASX Code" ng-model="asxcodeinput" />
                    </div>
                    <button class="btn btn-default floatRight" my-add-code-button>Add</button>
                </form>
                <div id="watchlistItemList">
                    <!-- Test item -->
                    <div class="watchItem">
                        <a href="#/AFI">
                            <div class="watchItemText">
                                <p class="asxCodeText"><strong>AFI</strong></p>
                                <p class="asxCodeDesc"><small>Australian Foundation Investments Co</small></p>
                            </div>
                            <div class="watchItemQuote">
                                <p class="asxPrice lead">$6.50</p>
                                <p class="asxChangeUp text-success">+ 5%</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="floatLeft" id="rightDiv" ng-view>

            </div>
        </div>
    </div>

</body>
</html>

指令“编译”并按预期方式附加到DOM元素，但是asxCode变量未在指令模板内插值。

任何建议，不胜感激。

Answer 1

您正在使用scope.asxcodeinput而不是scope.asxCode 。

Answer 2

尝试更改此行：

angular.element(document.getElementById('watchlistItemList')).append($compile("<watchlist-item asx-code=" + scope.quote.Symbol + "></watchlist-item")(scope));

至：

angular.element(document.getElementById('watchlistItemList')).append($compile('<watchlist-item asx-code="{{' + scope.quote.Symbol + '}}"></watchlist-item>')(scope));

进行了三处更改，您缺少了</watchlist-item")的结尾> ，而孤立的作用域@将进行插值，因此您需要传递表达式{{}} ，并且我将双引号更改为单引号，因此您可以在双引号内正确设置属性。

Answer 3

谢谢大家

我一直在以完全错误的方式看待这个问题。 感谢Claies推荐ng-repeat。 没意识到这是摘要循环的一部分。

最终使用ng-click触发的API调用实现了ng-repeat，并将数据附加到ng-repeat数组。

AngularJS指令隔离范围问题

问题描述

3 个解决方案

解决方案1
0 2015-09-11 13:41:09

解决方案2
0 2015-09-11 13:52:32

解决方案3
0 已采纳 2015-09-11 15:23:03

AngularJS指令隔离范围问题

问题描述

3 个解决方案

解决方案1 0 2015-09-11 13:41:09

解决方案2 0 2015-09-11 13:52:32

解决方案3 0 已采纳 2015-09-11 15:23:03

解决方案1
0 2015-09-11 13:41:09

解决方案2
0 2015-09-11 13:52:32

解决方案3
0 已采纳 2015-09-11 15:23:03