AngularJs從指令中的服務響應中操作數據

我從我的服務中獲得一些響應。該反應是在AngularJs從指令中的服務響應中操作數據

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

響應包含標籤「我的標籤」的形式。我想編寫一個指令，每當呈現響應時，都會在標籤內操作「Click me」內容。自定義標籤中的內容應轉換爲超鏈接。我怎樣才能做到這一點？這是我的示例代碼。

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

來源

2016-04-25 ASR

這篇文章可能會有所幫助http://stackoverflow.com/questions/14692640/angularjs-directive-to-replace-text –

是啊，我已經看到了這篇文章。就我而言，控件甚至不會輸入鏈接功能。我嘗試將元素標記「my-input」轉換爲屬性而不是元素。那也行不通。 – ASR

在您的指令中查看使用$ compile服務並將結果替換爲鏈接函數的元素，例如element.replaceWith（$ compile（element）（$ scope））或element.replaceWith（newHtml）（$ scope）） – RamblinRose

爲了使myTag正常工作，您需要編譯您收到的文本響應，否則myTag的link函數根本不會被調用。

總的想法應該是避免直接操縱DOM並將此任務留在指令中。因此，渲染之後數據的最佳方式是修改模型（scope）並對指令中的這些更改作出反應，該更改應用於應包含要呈現的數據的元素。

這裏是一個可能的解決方案之一：

HTML

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

    <head> 
    <script data-require="[email protected]" 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>

的JavaScript

angular.module('app', []) 
    .directive('myTag', function() { 
    return { 
     transclude: true, 
     template: '<a href="#" ng-transclude></a>' 
    } 
    }) 
    .directive('myList', ['$compile', function($compile) { 
    return { 
     template: '<ul></ul>', 
     link: function(scope, element) { 
     scope.$watchCollection('data', function(data) { 
      if(data && data.length) { 
       element.empty(); 
       data.forEach(function(item) { 
       element.append( 
        $compile(// <= in order to make myTag directive work, you need to compile text 
        angular.element('<p>'+item+'</p>').contents() // convert text to list of DOM elements wrapped by jqLite/jQuery 
       )(scope) 
       ); 
       }); 
      } 
      } 
     ); 
     } 
    } 
    }]) 
    .run(['$http', '$rootScope', function($http, $rootScope) { 
    $rootScope.data = []; 
    $http.get('data.txt').then(function(xhr) { 
     $rootScope.data.push(xhr.data); 
    }); 
    }]);

Plunker

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

來源

2016-04-25 13:46:21 Vadim

This works！謝謝 – ASR

AngularJs從指令中的服務響應中操作數據

回答

相關問題