javascript - 如何将编程标记添加到我的 Angular 页面中?

标签 javascript angularjs

在我的 Angular 应用程序 (1.4) 中,我在网格中有一个控件,该控件可能是多种类型之一,因此我创建了一个 JavaScript 函数来执行逻辑并吐出应输入的标记。

但是它无法正常工作。标记将呈现,但其中似乎没有任何 Angular Hook 。以我有限的理解,我认为原因与这个消化周期/时间有关。我还怀疑我的代码应该在指令中,但不确定。

我创建了一个演示程序来解决这个问题。 https://plnkr.co/edit/nuxFzqN0n6XgSHqmC6jK?p=info这是标记。访问plunk查看js并运行:

<body ng-controller="MainCtrl">
  <div>Button1:    <input type="button" value="Button 1" ng-click="button1click()"/><span ng-show="showButton1Result">BUTTON 1 CLICKED!</span></div>
  <div>Button2:    <span ng-bind-html="button2Markup()"></span></div>
  <div>Button3:    {{ button3Markup }}</div>
</body>

你明白了。这里最好的方法是什么?

最佳答案

这已在其他地方得到回答:Programmatic Angular Templates?

指令是您要使用的内容:

<div>Button 2: <div programatic-button="button2Markup()"></div></div>
<div>Button 3: <div programatic-button="button3Markup"></div></div>

.directive('programaticButton', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var html = scope.$eval(attrs.programaticButton);
      var newElement = $compile(html)(scope);
      element.append(newElement);
    }
  };
});

https://plnkr.co/edit/YGDOmtdfgQMfy0jnNVI4?p=preview

关于javascript - 如何将编程标记添加到我的 Angular 页面中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38748285/

相关文章:

javascript - 以指令作为内容的 Angular JS 绑定(bind)变量

javascript - 如何在angularJS中将字符串转换为数组

javascript - 遍历数组的模数算法

javascript - 尝试动态更改导航栏中的 "active"类 - Node.js/Express/Handlebars

javascript - 如何根据多个条件过滤嵌套的对象数组?

javascript - Not 运算符无法处理我的 javascript 代码

javascript - AngularJS Material 选项卡 - 删除滚动

javascript - 使用具有全局值的 Javascript Replace() 时 ng-bind-html 会中断

javascript - AngularJS 不进入 Controller

javascript - 创建过滤器以在 Angular JS 中编译动态字符串