【发布时间】：2015-12-08 02:06:43
【问题描述】：
我对 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 变量未在指令模板内插值。
非常感谢任何建议。
【问题讨论】：
-
你能把它扔在小提琴里吗？
-
不太清楚你在这里想要完成什么；您有一个指令试图使用
angular.element插入然后编译另一个指令，但是您正在编译的范围是按钮指令的隔离范围？通常，angular.element的使用是代码异味；您正在尝试操作 DOM，而不是尝试操作 DATA。 -
就像我说的，对 AngularJS 来说非常陌生。我在高级别尝试做的是在输入字段中输入代码，根据该输入进行 API 调用，然后使用从 API 调用中检索到的数据附加指令模板的另一个实例。
-
把它追加到哪里？你还没有显示你的代码的那部分。 经常使用的 方法是使用一个数组来存储您的
codes，并针对该数组使用ng-repeat来输出您的指令。当一个新的code添加到数组中时，它会自动通过ng-repeat添加到DOM中。 -
是的，完全正确。它是双向绑定的，可以过滤、排序等。同时我会尝试写一个例子，问题stackoverflow.com/questions/14994391/…是一个很好的阅读。
标签： javascript angularjs angularjs-directive