<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="my-directive"></div>
</body>
</html>
<script type="text/javascript">
angular.module("app", [])
.controller("ctrl", function () { })
.directive("myDirective", function () {
var Directive = {};
Directive.restrict = "C";
Directive.template = "<P style='color:white'>Jay Jagannath...</P>";
Directive.link = function ($scope, element, attr)
{
element.append("<input type='button' value='Press Me' /><Br>");
element.bind('mouseenter', function () {
element.css('background-color', 'red');
});
element.on('mouseleave', function () {
element.css('background-color', 'Black');
});
element.on('click', function () {
element.append("<input type='text' /><Br>");
});
};
return Directive;
});
</script>
-----------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController as vm">
<my-select callback="vm.setValue($value)"></my-select>
<p>Selected Value: {{vm.value}}</p>
</div>
</body>
</html>
<script type="text/javascript">
angular.module('myApp', [])
.controller('MyController', MyController)
.controller('MySelectController', MySelectController)
.directive('mySelect', mySelectDirective);
function MyController() {
var vm = this;
vm.setValue = function (value) {
vm.value = value;
};
}
function MySelectController() {
var vm = this;
vm.items = [
{ label: 'One', value: 1 },
{ label: 'Two', value: 2 },
{ label: 'Three', value: 3 }
];
}
function mySelectDirective() {
return {
bindToController: {
callback: '&'
},
controller: 'MySelectController',
controllerAs: 'vm',
link: postLink,
scope: true,
template: '<select ng-model="vm.selected" ng-change="fillddl()" ng-options="item.value as item.label for item in vm.items"></select>'
};
function postLink(scope, iElement, iAttrs, vm) {
scope.$watch(function () {
return vm.selected;
}, function (newValue) {
if (angular.isDefined(newValue) && typeof vm.callback === 'function') {
vm.callback({ $value: newValue });
}
});
scope.fillddl = function () {
alert(vm.selected);
};
}
}
</script>
No comments:
Post a Comment