Question

DEMO

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

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

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

所以，这个：

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

应该导致：

enter image description here

单击按钮时，应显示标记：

enter image description here

my-markup指令不应该破坏其子节点的任何数据绑定。

Here is my attempt to implement this.

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

PLAYGROUND 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;
        }
    };
});

<强> Demo

Answer 2

请参阅下文

＆＃13;

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
        };
      };
    }
  };
});

＆＃13;

<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>

＆＃13;

AngularJS：如何实现输出其标记的指令？

2 个答案: