Question

在我的Angular应用程序（1.4）中，我在网格中有一个控件可能是几种类型中的一种，因此我创建了一个javascript函数来执行逻辑并吐出应该进入的标记。

然而它无法正常工作。标记将呈现，但似乎没有任何Angular钩子。在我有限的理解中，我认为原因与这个摘要周期/时间有关。我也怀疑我的代码应该在指令中，但不确定。

我已经创建了一个演示此问题的插件。 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>

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

Answer 1

其他地方已经回答：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

Answer 2

如上所述，您应该使用directive。把你的插件作为起点，它可能类似于以下内容。

HTML文档

<body ng-controller="MainCtrl">
  <my-buttons type="type"></my-buttons>
  <br>
  <my-buttons type="2"></my-buttons>
</body>

<强>的JavaScript

angular.module('plunker', [])
  .directive('myButtons', function() {
    return {
      scope: {
        type: '='
      },
      templateUrl: 'my-buttons-tpl.html',
      link: function(scope) {
        scope.click = function() {
          scope.clicked = !scope.clicked;
        };
      }
    };
  })
  .controller('MainCtrl', function($scope) {
    $scope.type = 1;
  });

my-buttons-tpl.html

<span ng-if="type === 1">
  <input type="button" 
         value="Button 1" 
         ng-click="click()">
</span>

<span ng-if="type === 2">
  <input type="button" 
         value="Button 2" 
         ng-click="click()">
</span>

<span ng-show="clicked">button type {{ type }} haz ben clicked</span>

Answer 3

我相信ng-bind-html实际上并没有绑定插入代码中的任何角度功能。

正如您在the Angular source中看到的那样，内容只是放在HTML元素中，没有其他任何花哨的东西。

我认为你应该在这个例子中重新考虑ng-bind-html的使用，而是考虑Directives而不是

如何将程序化标记放入我的Angular页面？

3 个答案: