在使用angularjs指令

时间:2017-07-09 10:07:21

标签: javascript angularjs angularjs-directive

如何在被angular js指令替换之前获取原始标记?这个问题已被提出,但我发布这个问题,因为解决方案对我不起作用,而且我想知道角度js团队是否可能为此引入了任何新方法。

这是我到目前为止所尝试的:

  function $block($compile) {

    var html = '<div>new content</div>';

    return {
      restrict: 'E',
      template: function(element, attrs) {
        console.log(element); // still getting the new element
        return html;
      },
      link: function(scope, element, attrs) {
           console.log(element)
      }
    };

  }

  angular.module('directive', [])
    .directive('myDirective', $block);

如何获取旧模板,然后将其替换为新模板?

2 个答案:

答案 0 :(得分:1)

当您console.log某个对象时,浏览器会在查看时显示内容值。不是在它被记录的时候。这就是开发者控制台的工作方式。

如果您记录innerHTML,您会发现它们不同:

angular.module('directive', [])

    .directive('myDirective', $block);
 
  function $block($compile) {

    var html = '<div>new content</div>';

    return {
      restrict: 'E',
      template: function(element, attrs) {
        console.log(element[0].innerHTML);
        return html;
      },
      link: function(scope, element, attrs) {
           console.log(element[0].innerHTML);
      }
    };

  }
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app=directive>
    <h1>Directive Demo</h1>
    <my-directive><div>Old Content</div>
    </my-directive>
  </body>

答案 1 :(得分:0)

&#13;
&#13;
  angular.module('directive', [])
    .directive('myDirective', function(){
      return {
      restrict: 'A',
      template: '<div>new content</div>',
      link: function(scope, element, attrs) {
      },
      compile:function(scope,element){
      console.log(element.$$element[0].outerHTML)
      
      }
    };
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body ng-app="directive">
<div style="background-color:red;" my-directive>Hello</div>
</body>
</html>
&#13;
&#13;
&#13;