Question

我对AngularJS很新，我正在尝试组建一个小型演示应用程序。我试图开始工作的部分如下：

用户将股票市场代码输入到与ng-model双向绑定的文本字段中。
Directive具有绑定到单击功能，可从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>

该指令＆＃34;编译＆＃34;并按预期附加到DOM元素，但asxCode变量不在指令模板中插值。

任何建议都非常感谢。

Answer 1

您使用scope.asxcodeinput代替scope.asxCode。

Answer 2

尝试更改此行：

f[0]='1';

为：

Values     : | 6 | 5 | 5 |   | 1ellohai | asd | 
Variable   : | d | e | f |   |          |     | 
Memory(hex): | 1 | 2 | 3 | 4 |    5     |  6  |

有三处更改，您错过了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 个答案: