Question

我想添加一个常见的自定义指令，在实例化时，将查看字符串输入并使用正确的电话HTML返回字符串标记。目前逻辑在消息指令内，在我的html中：

<div ng-repeat="message in messages >
            <p ng-bind-html=message.title</p> 
        </div>

在指令中我有：

.directive('message', function () {
        return {
            scope: {
                messages: "=messages",
            },
            restrict: 'E',
            controller: 'MessageSummary',
            controllerAs: 'messageSummary'
        };
    })

.controller('MessageSummary', ['$scope', function ($scope) {
  angular.forEach($scope.messages, function (message, index) {
     $scope.messages[index].title = wrapStringWithPhoneNumberHTMLTag($scope.messages[index].title);
  });

我需要将此逻辑提取到其自己的指令中，以便可以在任何地方重复使用。目前我补充道：

<div ng-repeat="message in messages >
            <p ng-bind-html=message.title ng-phone-caller=message.title</p> 
        </div>

和

.directive('ngPhoneCaller',function() {
       return {
           scope: {
               inputString: '='
           },
           link: function (scope) {
               scope.inputString = wrapStringWithPhoneNumberHTMLTag(scope.inputString);
           }
       }

但是传递给函数的scope.inputString是未定义的。另外，我对如何将其与ng-bind-html-＆gt;进行整合有点迷失。我需要这个来验证返回的HTML字符串在传递给自定义公共指令后。此外，这是最好的方式吗？似乎有人使用我的属性自定义指令，他们需要实现ng-bind-html，有没有办法在自定义指令中安全地集成注入HTML？

Answer 1

通过将数据传递到模板布局来使用指令的基本示例

＆＃13;

var app = angular.module('myApp', []);

app.controller('MyController1', function ($scope) {
  $scope.data = [
    {
      'title': 'one'
    },
    {
      'title': 'two'
    },
    {
      'title': 'three'
    }
  ];
});

app.controller('MyController2', function ($scope) {
  $scope.data = [
    {
      'title': 'satu'
    },
    {
      'title': 'dua'
    },
    {
      'title': 'tiga'
    }
  ];
});

app.directive('myDirective', function () {
  'use strict';
  return {
    restrict: 'E',
    scope: {
      data: '=data'
    },
    template: [
      '<div ng-repeat="record in data">',
        '{{ record.title }}',
      '</div>'
    ].join('')
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyController1">
    <my-directive data="data">
  </div>
  <br \>
  <div ng-controller="MyController2">
    <my-directive data="data">
  </div>
</div>

＆＃13;

如何使用ng-bind-html通过自定义指令传递和更新数据

1 个答案: