angularJs（一）指令

来源：互联网发布：科蓝软件股票编辑：程序博客网时间：2024/05/16 05:23

1、调用

指令调用可以ng:bind, ng-bind, ng_bind, x-ng-bind , data-ng-bind这些方式

<!doctype html><html ng-app>  <head>    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>    <script src="script.js"></script>  </head>  <body>    <div ng-controller="Ctrl1">      Hello <input ng-model='name'> <hr/>      <span ng:bind="name"> <span ng:bind="name"></span> <br/>      <span ng_bind="name"> <span ng_bind="name"></span> <br/>      <span ng-bind="name"> <span ng-bind="name"></span> <br/>      <span data-ng-bind="name"> <span data-ng-bind="name"></span> <br/>      <span x-ng-bind="name"> <span x-ng-bind="name"></span> <br/>    </div>  </body></html>

script

function Ctrl1($scope) {  $scope.name = 'angular';}

2、指令的编写（短板）

html

<!doctype html><html ng-app="time">  <head>    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>    <script src="script.js"></script>  </head>  <body>    <div ng-controller="Ctrl2">      Date format: <input ng-model="format"> <hr/>      Current time is: <span my-current-time="format"></span>    </div>  </body></html>

script

function Ctrl2($scope) {  $scope.format = 'M/d/yy h:mm:ss a';}angular.module('time', [])  // Register the 'myCurrentTime' directive factory method.  // We inject $timeout and dateFilter service since the factory method is DI.  .directive('myCurrentTime', function($timeout, dateFilter) {    // return the directive link function. (compile function not needed)    return function(scope, element, attrs) {      var format,  // date format          timeoutId; // timeoutId, so that we can cancel the time updates      // used to update the UI      function updateTime() {        element.text(dateFilter(new Date(), format));      }      // watch the expression, and update the UI on change.      scope.$watch(attrs.myCurrentTime, function(value) {        format = value;        updateTime();      });      // schedule update in one second      function updateLater() {        // save the timeoutId for canceling        timeoutId = $timeout(function() {          updateTime(); // update DOM          updateLater(); // schedule another update        }, 1000);      }      // listen on DOM destroy (removal) event, and cancel the next UI update      // to prevent updating time ofter the DOM element was removed.      element.bind('$destroy', function() {        $timeout.cancel(timeoutId);      });      updateLater(); // kick off the UI update process.    }  });

3、指令的编写（长版）

完整的

var myModule = angular.module(...);myModule.directive('directiveName', function factory(injectables) {  var directiveDefinitionObject = {    priority: 0,    template: '<div></div>',    templateUrl: 'directive.html',    replace: false,    transclude: false,    restrict: 'A',    scope: false,    compile: function compile(tElement, tAttrs, transclude) {      return {        pre: function preLink(scope, iElement, iAttrs, controller) { ... },        post: function postLink(scope, iElement, iAttrs, controller) { ... }      }    },    link: function postLink(scope, iElement, iAttrs) { ... }  };  return directiveDefinitionObject;});

大部分指令只关心实例，并不需要将模板进行变形，所以我们还可以简化：

var myModule = angular.module(...);myModule.directive('directiveName', function factory(injectables) {  return function postLink(scope, iElement, iAttrs) { ... }});

0 0