Question

我收到了我的服务回复。答案采用

的形式

 "My data <my-tag>Click me</my-tag>".

回复包含标记＆＃34; my-tag ＆＃34;。我想写一个操纵内容的指令＆＃34;点击我＆＃34;在呈现响应时在标记内。自定义标记中的内容应转换为超链接。我怎样才能做到这一点？这是我的示例代码。

我有myService.js

Service.js

(function() {
    function myService() {
        this.getData = function(question,questionType) {
        anotherService.getList(function(data, status) {   
 //Here data.text = "<my-tag>Click me</my-tag>"            
                   document.getElementById("additionalData").innerHTML + data.text;
            });                         
        }                           
    }
    app.addService(app.config.modules.MY_MODULE, "myService", myService);
}());

Directive.js

(function() {
    app.directive('myTag', function () {
        debugger;
        return {
            link: function ($scope, element, attrs) {
                debugger;
                //Convert the text "Click me" into hyperlink
            }
        };
    });
}());

myHtml.html

<html ng-app = "myApp">
        <head>
            <script>
                app.inject(app.config.modules.MY_MODULE, "myService", function(instance) {
                    myService = instance;
                    console.log("myService dependency injected successfully.");
                });
            </script>
        </head>
        <body ng-controller="myCtrl">
            <div>
                <img id="getList" onclick="myService.getData()">
            </div>
        </body>
    </html>

Answer 1

您需要编译以文本形式收到的回复，以使myTag正常工作，否则link的{{1}}功能将完全无法调用。

一般的想法应该是避免直接操纵DOM并将此任务留给指令。因此，呈现之后的一些数据的最佳方法是修改模型（myTag）并对应用于应包含要呈现的数据的元素的指令中的这些更改做出反应。

以下是可能的解决方案之一：

<强> HTML

scope

<强>的JavaScript

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <my-list></my-list>
  </body>

</html>

<强> Plunker

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

AngularJs在指令中处理来自服务响应的数据

1 个答案: