Question

首先让我解释一下我想用破伪代码完成的事情：

// controllers.js
angular.module('myApp.controllers', []).
  controller('MyCtrl1', [function() {
     var template = '<div my-directive></div>';
     var div = $("#view1").append(template);
     var code = http.get('/dynamic-code-for-directive');
     angular.module('myApp.directives').directive(eval(code));

  }])

// Index.html
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a id="view1" href="#/view1">view1</a></li>       
  </ul>
</body>
</html>

// code.js returned by "GET /dynamic-code-for-directive"
function(scope, element){ $("#view1").append("Hello World");

说明

基本上我希望服务器提供指令的定义，然后动态生成一个。似乎问题是上面的append调用---它不能将模板识别为指令，因此指令代码永远不会被调用。

有没有人试图完成与此类似的任何事情？

Answer 1

尝试按以下顺序执行

 var code = http.get('/dynamic-code-for-directive');
 angular.module('myApp.directives').directive(eval(code)); //ie adding the directive definition

然后制作一个模板，但你缺少的一步是编译它

     $scope.template = $compile(<div my-directive></div>')($scope);

然后追加它！

angular.element("#view1").append($scope.template);

请退回结果

Answer 2

有些事情你做错了，你在控制器内部进行DOM操作，这是错误的而且没有合适地使用angularjs。

要使用$ compile，您需要在指令中。它看起来像是：

app.directive('directiveCreator', function($compile, $http) {
  return function(scope, element, attrs) {
    var template = '<div my-directive></div>';
    element.html(template);
    var code = $http.get('/dynamic-code-for-directive');
    app.directive('myDirective', function() {
       var link = eval(code);
      return {
        link : link
      }
    }
    $compile(element.contents())(scope);
  }
  );
};

可能会有错误，但就会出现这样的错误。

是否可以在angularjs中创建动态指令？

说明

2 个答案: