AngularJS动态加载指令示例-优快云博客

本文介绍了一个使用AngularJS动态加载自定义指令的示例。通过懒加载的方式注册指令，并在运行时动态地将其应用到DOM中。该示例展示了如何在用户交互时动态修改页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例如通过某些事件触发了require(/指令文件/) 加载后同时有个ng-include加载一个模板，这个时候刚才加载的指令并在模板中生效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>AngularJS</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>

</head>
<body>

  <div ys-test></div>
  <div ng-controller="TestCtrl">
    <span ng-click="drag()">测试</span>
  </div>



<script type="text/javascript" charset="utf-8">
var app = angular.module('Demo', [], function($compileProvider, $provide){
  $provide.factory('lazy', function(){
    return {
      registerDirective: function(name, directive){
        $compileProvider.directive(name, directive);
      }
    }
  });
});

app.controller('TestCtrl', function($scope, $compile, lazy){
  $scope.drag = function(){

    lazy.registerDirective('ysTest', function(){
      var compile = function($element){
        $element.html('这里');
      }
      return {compile: compile};
    });

    var html = '<div ys-test>新的</div>';
    var node = $compile(html)($scope.$new());
    $('body').append(node);
  }
});


angular.bootstrap(document, ['Demo']);
</script>
</body>
</html>