AngularJS：如何实现输出的标记指令？(AngularJS: How to implement

DEMO

想象一下，我有一些标记，例如：

<my-input model="data.firstName"></my-input>

现在，我想创建一个my-markup指令，将添加一个按钮来显示/隐藏它的标记。

所以这：

<div my-markup>
  <my-input model="data.firstName"></my-input>
</div>

应该导致这样的：

并单击按钮时，标记应该出现：

在my-markup指令不应该打破其子女的任何数据绑定。

这是我尝试实现这一点。

该标记出现，但按钮不起作用。任何想法如何解决这一问题？

游乐场HERE

Answer 1:

这里是我的方法。事情夫妇： -

1）替代上myMarkup隔离范围，创建一个子范围，最终的实际指令myInput将被隔离。如果你需要支持多个这就需要myMarkup在相同的范围指令。

2）你需要在按钮上点击事件，我不会做的，而不是标记抽象出来对范围的方法的逻辑。

3）你只需要一个按键，不需要2个按钮。只是改变了按钮的文本。

.directive('myMarkup', function($compile) {


  return {
    restrict: 'A',
    scope: true, //Create a child scope
    compile: function(element) {
      //Just need one button
      var showButton = '<button  ng-click="toggleMarkup()">{{model.showMarkup ? "Hide": "Show"}} Markup</button>';
      var markup = '<pre ng-show="model.showMarkup">' + escapeHtml(element.html()) + '</pre>';

      //append the markups
      element.append(showButton).append(markup);

      return linker;
     }
   };

    function linker(scope, element) {
        scope.model = {
          showMarkup: false
        };
        //Click event handler on the button to toggle markup
        scope.toggleMarkup = function(){
          scope.model.showMarkup = !scope.model.showMarkup;
        }
    };
});

演示

Answer 2:

下面请看

 function escapeHtml(html) { return html.replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); } angular.module('App', []).controller('AppCtrl', function($scope) { $scope.data = { firstName: 'David' }; }).directive('myInput', function() { return { restrict: 'E', scope: { model: '=' }, template: '<input class="my-input" type="text" ng-model="model">' }; }).directive('myMarkup', function() { return { restrict: 'A', scope: {}, link: function(scope, elem, attr) { }, compile: function(element) { var showButton = '<button ng-if="data.showMarkup" ng-click="data.showMarkup=!data.showMarkup">Hide Markup</button>'; var hideButton = '<button ng-if="!data.showMarkup" ng-click="data.showMarkup=!data.showMarkup">Show Markup</button>'; var markup = '<pre ng-if="data.showMarkup">' + escapeHtml(element.html()) + '</pre>'; element.append(showButton); element.append(hideButton); element.append(markup); return function(scope, element) { scope.data = { showMarkup: true }; }; } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="App" ng-controller="AppCtrl"> <pre>data = {{ data | json }}</pre> <div my-markup> <my-input model="data.firstName"></my-input> </div> </body>

文章来源: AngularJS: How to implement a directive that outputs its markup?