You see this code run here: http://kasajian.github.io/Ancus/ball.html
<html ng-app="appz" ng-cloak>
<head>
<title ng-bind="title"></title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.js"></script>
<script>
angular.module('appz', [])
angular.module('appz').directive('ball', ['googleFactory', function (googleFactory) {
var setAttribute = function(attrs, newValue, element) {
googleFactory.getSearchResults(" ball " newValue, 'images').then(function (response) {
var currentValue = element[0].attributes['type'].value;
if (currentValue !== newValue) {
setAttribute(attrs, currentValue, element);
} else {
var results = response.data.responseData.results;
attrs.$set('src', results[0].unescapedUrl);
}
}).catch(function (error) {
console.error(error);
});
};
return {
restrict: 'E',
template: '<img height="100"/>',
replace: true,
link: function (scope, element, attrs) {
attrs.$observe('type', function(newValue, oldValue) {
if (newValue !== oldValue) {
setAttribute(attrs, newValue, element);
}
});
},
};
}]);
angular.module('appz').factory('googleFactory', ['$http', function ($http) {
// what = 'web', 'images', 'local', 'video', blogs', 'news', 'books', 'patent', etc.
var getSearchResults = function (searchTerm, what) {
if (httpPromise) {
console.log("Rejected: " searchTerm);
return httpPromise;
}
console.log("Searching: " searchTerm);
var host = 'https://ajax.googleapis.com/ajax/services/search/' what;
var args = {
'version': '1.0',
'searchTerm': searchTerm,
'results': '1',
'callback': 'JSON_CALLBACK'
};
var params = ('?v=' args.version '&q=' args.searchTerm '&rsz='
args.results '&callback=' args.callback);
httpPromise = $http.jsonp(host params);
return httpPromise.then(function (response) {
return response;
}).catch(function(error) {
console.error(error);
}).finally(function() {
httpPromise = null;
});
};
var httpPromise = null;
return {
getSearchResults: getSearchResults
};
}]);
</script>
</head>
<body>
<p ng-bind="title"></p>
<span my-sample></span>
<p></p>
<p>Enter ball type: <input type="text" ng-model="ballType" /></p>
<ball ng-init="ballType='red'"type="{{ballType}}" />
</body>
</html>
No comments:
Post a Comment