html 使用AngularJS MySearchboxDirective的示例。这演示了幻灯片http://slides.com/dj中演示的示例的一些修复
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用AngularJS MySearchboxDirective的示例。这演示了幻灯片http://slides.com/dj中演示的示例的一些修复相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-left : 15px;
margin-top: 15px;
}
input {
padding-left: 10px;
}
</style>
</head>
<body ng-app="djsmith.sample" ng-controller="SampleController">
<!-- @see http://slides.com/djsmith/deep-dive-into-custom-directives -->
<p>
Searching: <input type="text" ng-model="criteria" placeholder="{{placeholder}}" style="margin-left: 10px;" />
</p>
<my-searchbox
search-text="criteria"
placeholder="Please search now" >
</my-searchbox>
<script src="//code.angularjs.org/1.3.0-beta.9/angular.min.js"></script>
<script>
(function( ){
"use strict";
angular.module( 'djsmith.sample', [ ] )
.controller( 'SampleController', function SampleController($scope){
$scope.criteria = "ThomasB";
})
.directive( 'mySearchbox', function mySearchboxDirective( )
{
return {
restrict: 'E',
scope: {
searchText: '=',
placeholder: '@',
},
link: function($scope, element, attrs) {
watchSearchText($scope);
$scope.searchClicked = function() {
$scope.searchText = $scope.tempSearchText;
}
$scope.luckyClicked = function() {
$scope.searchText = $scope.tempSearchText;
}
},
template:
'<div>' +
' <input type="text" ng-model="tempSearchText" placeholder="{{placeholder}}" />' +
' <button ng-click="searchClicked()">' +
' Search' +
' </button>' +
' <button ng-click="luckyClicked()">' +
' I\'m feeling lucky' +
' </button>' +
'</div>'
};
// **********************************************************
// Private Methods
// **********************************************************
/**
* Watch our internal scope `searchText` to keep our directive's search input box
* synchronized; since it watches `tempSearchText`.
* @param $scope
*/
function watchSearchText($scope)
{
var unwatch;
$scope.tempSearchText = $scope.searchText;
unwatch = $scope.$watch('searchText', function( searchText ){
$scope.tempSearchText = searchText;
});
$scope.$on( "$destroy", unwatch );
}
});
})( );
</script>
</body>
</html>
以上是关于html 使用AngularJS MySearchboxDirective的示例。这演示了幻灯片http://slides.com/dj中演示的示例的一些修复的主要内容，如果未能解决你的问题，请参考以下文章
困惑：AngularJS $http POST 响应返回索引文件的 HTML 内容