Question

我在jQuery中有这个功能，但是我遇到了将其转换为angularJs函数的问题：

$('p').each(function() {
$(this).html($(this).text().split(/([\.\?!])(?= )/).map(
  function(v){return '<span class=sentence>'+v+'</span>'}
));

如果有人能够向我解释如何在angularJs中实现这些代码行，那将会非常有帮助在此先感谢你们

Answer 1

你需要为它编写一个指令，DOM操作只允许在链接函数的指令中使用，否则这是一个非常糟糕的做法。这是指令链接函数内部的代码。

    link: function (scope, element, attributes) {
              var el= $(element);
              el.find('p').each(function(){
                 el.html(el.text().split(/([\.\?!])(?= )/).map(
                    function(value){
                      return '<span class=sentence>'+value+'</span>'
                    }
                 ));                 
              });
           }

希望它可以帮助你，我实际上无法知道你想要做什么......否则我会帮助你提供完整的解决方案和适当的指导方法，任何进一步的帮助让我知道。感谢。

提出我的建议：JQuery方法与AngularJS不兼容。

根据您的要求更新了指令：

angular.module('yourAppModuleName').directive('contentClick', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            contentEditable: '=contentEditable'
        },
        link: function(scope, element, attributes) {

            scope.$watch(attributes.contentEditable, function(value) {
                if (value === undefined)
                    return;

                scope.contentEditable = attributes.contentEditable;
            });

            if(scope.contentEditable == 'true') {
             scope.$watch(attributes.ngModel, function(value) {
                if (value === undefined)
                    return;

                value.split(/([\.\?!])(?= )/).map(
                 function(v){
                  return '<span onclick="myFunction(this)" >'+v+'</span>'
                 }
                );                 
             });
            }

            //without timeout
            //function myFunction(x) { 
            //    x.style.background="#000000"; 
            //}  

            //with timeout
            function myFunction(x) { 
                $timeout(function() {
                  x.style.background = "green"; 
                }, 10000); 
            }          
        }
    };
}]);

<强> HTML：

<div contentEditable="isEditable" style="cursor:pointer" ng-model="content" content-click></div>

<强>控制器：

yourAppModuleName.controller('myController', ['$scope', function($scope) {

      $scope.isEditable = true;
      $scope.content;

}]);

将jquery函数转换为angularjs

1 个答案: