标签: angularjs-compile

我有一个复合列表指令 - 即 - 一个列表项,可以自己列表.
parent指令定义控制器:

.directive('parent', function() {
    controller: function($scope) {
    },
    link: function (scope, element, attrs) {
    }
})

列表(项目)需要父控制器,它本身工作正常(为什么不应该..):

.directive('list', function() {
     require: '^parent',
     link: function (scope, element, attrs, parentCtrl) {
     }
  })

具体项目也是如此,这也很好:

.directive('item', function() {
    require: '^parent',
    link: function (scope, element, attrs, parentCtrl) {
    }
})

项目可以是复合项目,在这种情况下,它自己创建"列表".这个组合是通过$ compile(ing)链接函数中的一个列表项来完成的:

link: function (scope, element, attrs, parentCtrl) {
      ...
      $compile("<list></list>")(scope)
      ... 
}

抛出异常:
指令'list'所需的控制器'parent'无法找到!

原因很明显 - $ compile函数没有提供控制器,因此无法解析'parent'的要求.
所以我尝试手动提供控制器:

$compile("<list></list>")(scope, null, {'parent': parentCtrl});

哪个不会抛出异常,但仍然无法在需要时提供此控制器.

任何想法如何使$ compile函数接受一个外部控制器,也应该进行评估？

这是一些快速的背景信息.我刚升级到Angular 1.4.我正在使用用C#编写的API来进行服务器端调用.

我页面的一部分显示了2个选择列表(项目和子项目).两者都应默认为"(选择______)",我将其列为每个选择的第一个选项,其中"值"为0.适当的ng模型变量初始化为0.

选择列表的实际HTML代码是在服务器端使用字符串连接生成的,通过$ http传递给客户端,并使用调用$ compile的指令插入(完全不理想,但我的客户端几乎链接了我)到这个API).在1.4更新之前,一切都运行良好.

现在,我的项目选择列表默认为什么都没有.当我检查元素时,这就是我所看到的......

<select ng-change="updateSubProjList()" ng-model="curProjID">
    <option value="? number:0 ?"></option>
    <option value="0">(Select a Project)</option>
    <option value="1">First Project</option>
    <option value="2">Second Project</option>
    ...
</select>

......首先是"？数字:0？" 条目是当前选择的条目.我的子项目选择列表仍然初始化很好,这使得这更奇怪.

我知道在对AngularJS 1.4的更新中有一些$ compile的更新,但我无法找到解决问题的方法.任何帮助将不胜感激.

我想知道将功能传递到2个或更多级别组件的最佳方法是什么？使用'&'绑定时,没有简单的方法可以跳过函数换行？

这是一个用例:

angular.module('app', []).component('app', {
  controller: class AppController {
    doSomething (data) {}
  },
  template: `
    <sub-component on-do-something="$ctrl.doSomething(data)">
    </sub-component>
  `
})

ps:我正在使用ngRedux,所以这种情况很常见

编辑:

问题是:为了使上面的代码工作,每个内部组件控制器将如下所示:

.component('subComponent', {
    bindings: {
        doSomething: '&'
    },
    controller: function SubComponentController () {
        this._doSomething = param => this.doSomething({data: param});
    },
    template: `
        <inner-component do-something="$ctrl._doSomething(data)">
        </inner-component>
    `
});

.component('innerComponent', {
    bindings: {
        doSomething: '&'
    },
    controller: function InnerComponentController () {
        this._doSomething = param => this.doSomething({data: param});
    },
    template: `
        <sub-inner-component do-something="$ctrl._doSomething(data)">
        </sub-inner-component>
    `
});

然后我必须传递_doSomething而不是doSomething直接传递. …

我使用$ compile服务编译了一个元素.如果我直接将它添加到DOM,它看起来很棒,并且所有绑定都是正确的.如果我想将该元素作为字符串,则显示{{stuffHere}}而不是绑定.有没有办法在编译后获取元素的html？

$templateCache.put('template', '<div><div><div><span>content is {{content}}</span></div></div>   </div>');

$scope.content = 'Hello, World!';

var el = $compile($templateCache.get('template'))($scope);
$('body').append(el);

alert(el.html());

http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview

附加到正文的元素显示 content is Hello, World!

警报显示 <div><div><span ng-binding>{{content}}</span></div></div>

我希望从警报中看到的是 <div><div><span ng-binding>Hello World</span></div></div>

我从angular网站上阅读了有关debugInfoEnabled的文档.仍然不清楚概念,$compileProvider.debugInfoEnabled(false)内部角度配置如何通过删除元素级别类(angular-directives)绑定(如ng-scope和)来提高应用程序的性能ng-isolated-scope.

有谁知道,如何通过将debugInfoEnabled设置为false来实现性能提升$compileProvider？任何人都可以帮我清除$compileProvider.debugInfoEnabled角度1.3 角度特征的概念吗？

任何帮助将不胜感激,在此先感谢:)

我正在读这篇关于角度性能优化的文章,那里有以下段落:

Directive的编译函数在附加作用域之前运行,是运行任何DOM操作(例如绑定事件)的理想位置.从性能的角度来看,重要的是,在进行任何角度更改之前,传递给compile函数的元素和属性代表原始html模板.这在实践中意味着在这里完成的DOM操作将运行一次,并且总是传播.另一个经常被掩盖的重点是prelink和postlink之间的区别.简而言之,预链接从外部运行,而postlinks从内到外运行.因此,预链接提供了轻微的性能提升,因为它们阻止内部指令在父链接修改预链接中的范围时运行第二个摘要周期.但是,孩子DOM可能尚未推出.

我无法理解这两个部分以及如何使用它来提高性能:

这在实践中意味着在这里完成的DOM操作将运行一次,并且总是传播.

还有这个

prelinks提供了轻微的性能提升,因为它们阻止内部指令在父链接修改预链接中的范围时运行第二个摘要周期

如果有人能够对此表示赞赏,我将不胜感激.

我正在尝试使用动态编译Angular组件$compile,但是范围不会传递给组件范围,而是传递给$ parent范围.

这是一个绑定到myTitle-attribute并呈现它的简单组件:

app.component('myComponent', {
  bindings: {
    myTitle: '<'
  },
  template: `
    <div>
      <div>Doesn't work: {{ $ctrl.myTitle}}</div>
      <div>Works: {{ $parent.$ctrl.myTitle}}</div>
    </div>`
});

然后在控制器(或指令等)中使用$ compile编译它:

app.controller('MainCtrl', function($scope, $element, $compile) {
  var template = '<my-component></my-component>';

  var bindings = {
    myTitle: 'My Title'
  }
  var scope = angular.extend($scope.$new(true), {
    $ctrl: bindings
  });
  var newElement = $compile(template)(scope);
  $element.append(newElement);

});

运行时,它会产生结果:

不起作用:

作品:我的头衔

这是一个在行动中展示它的人

这个问题

为动态创建的组件创建的范围如何作为组件的父范围传递？

关于角度为何如此行为以及可能如何避免它的任何指针都非常受欢迎.

在嵌套指令上执行编译和链接函数的通常顺序如下

标记

<dir1>
  <div dir2="">
  </div>
</dir1>

执行顺序

1) compile of directive 1
2) compile of directive 2
3) link of directive 2
4) link of directive 1

假设dir1已将restrict属性设置为'E'并dir2已restrict设置为'A'

现在,如果ng-repeat在同一标记中使用指令,则执行顺序会发生变化

标记

<dir1>
  <div ng-repeat="item in items">
    <div dir2="">
    </div>
  </div>
</dir1>

假设items是在范围上定义的,执行顺序变为

1) compile of directive 1
2) link of directive 1
3) compile of directive 2
4) link of directive 2

Plunker - https://plnkr.co/edit/fRGHS1Bqu3rrY5NW2d97?p=preview …

有没有办法在下面的代码段中应用范围而不会抛出错误？(并且没有黑客和解决方法try/catch,$timeout或者硬编码BONJOUR)

没有SCOPE.$apply(),警报显示{{HELLO}}而不是BONJOUR.

var app = angular.module('APP', [])
  .controller('CTRL', function($scope, $compile) {

    $scope.showBonjour = function() {
      var SCOPE, CONTENT;

      SCOPE = $scope.$root.$new();
      SCOPE.HELLO = 'BONJOUR';

      CONTENT = $compile('<div>{{HELLO}}</div>')(SCOPE);

      SCOPE.$apply(); // This generates the $rootScope:inprog error, but I cannot omit it…

      window.alert(CONTENT.html());
    }

  });

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>

<html ng-controller="CTRL" ng-app="APP">
    <button ng-click="showBonjour()">Show BONJOUR</button>
</html>

有没有办法告诉Angular不编译某些元素的内容？

使用案例:

Angular CMS包含附加CKEditor的textarea元素.CKEditor使用divarea插件而不是默认的iframe插件.textareas包含HTML模板.这些模板按需导出并提供给Angular Web应用程序.

模板很简单:纯文本,有序列表,在纯文本上应用的临时预定义类属性; 但纯文本可以包含Angular webapp插入的占位符.我不想让CMS中的Angular插入这些内容.

目前我的问题是CMS中的Angular会插入这些占位符,并且由于它们不引用任何内容,因此将它们删除.我宁愿不只是将分隔符更改为'{[',']}',因为虽然这可能会在短期内解决这个问题,但随着项目的进行,指令和文本复制碰撞的可能性会增加,我希望避免它.

是否有任何指令或其他方式告诉Angular远离特殊标记元素的内容？

我正在使用OpenLayers和AngularJS,一切顺利,直到我开始触摸弹出功能.

我知道如何使用$compile服务使动态内容显示在弹出窗口中:

$scope.data = {
    text: "Dynamic content"
};

var template = "<div><span>{{data.text}}</span></div>";

$scope.showPopup = function() {
    var content = $compile(template)($scope);

    var lonlat = "-5694.06868525478, 6708925.0877411375";
    $timeout(function() {
        var popup = new OpenLayers.Popup.FramedCloud("popup",
            OpenLayers.LonLat.fromString(lonlat),
            null,
            content.html(),
            null,
            true
        );

        map.addPopup(popup);
    }, 0);
};

但是我现在正在努力处理事件处理程序,如果我更改template为(注意输入和ng-click跨度之后):

var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";

并在$scope以下位置定义事件处理程序

$scope.func = function() {
    console.log("Hello, world");
};

但事件无法触发.我非常怀疑使用content.html()遗嘱会丢失一些有用的信息.当我尝试以下代码时:

    var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";
    var …

我真的很困惑与angularjs中的$ compile.任何人都可以帮助我,在本文档中使用其他示例的angularjs中的$ compile有什么用处. https://docs.angularjs.org/api/ng/service/$compile