I'm fairly new to AngularJS and am trying to put together a small demo application. The part I'm trying to get working is as follows:
- User enters stock market code into text field that is two-way bound with ng-model.
- Directive has a bind-to-click function that retrieves some data from an API.
- Once data is returned, the directive is compiled and appended to a div.
- The directive is supposed to accept a text variable through an isolated scope and display it. This is the part that is not working properly.
Code
Directives
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('http://ift.tt/1qXLaIk', {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);
});
});
};
}]);
Directive Template
<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="http://ift.tt/1K1B2rp">
<link rel="stylesheet" href="css/styles.css">
<script src="http://ift.tt/1FBSnCz"></script>
<script src="http://ift.tt/1NmaLWh"></script>
<script src="http://ift.tt/1FBSkGR"></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>
The directive "compiles" and is appended to the DOM element as expected, but the asxCode variable is not interpolating within the directive template.
Any suggestions greatly appreciated.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire