个人中心
gpt4 book ai didi

javascript - 如何将带有重音字符的 url 从 Angular Controller 输出到 href 属性？

转载 作者：太空宇宙 更新时间：2023-11-04 16:07:52 26 4
gpt4 key购买 nike

我遇到的情况是 Angular Controller 中的数据是从 CMS 填充的。其中一些数据包括可能包含重音字符作为 html 实体的 url(非英语、é á 等)然后将此 url 数据绑定(bind)到 anchor 标记的 href 属性。然而，我似乎无法在没有(我认为) Angular 转义html的情况下绑定(bind)数据。如果我使用 ng-init 设置相同的 url，则绑定(bind)工作正常。但这不是我的项目的选择。附加的示例 (& JSFiddle ) 说明了当绑定(bind)模型中的数据但 ng-init 中的值正确呈现时， Controller 在何处呈现无效链接(我假设是转义的结果)。

<body ng-app="myApp" ng-controller="myCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <div>
    <h1>Example from model json</h1>
    <p>Link (href): <a href="{{item1.url}}">{{item1.url}}</a>
    </p>
    <p>Link (ng-href): <a ng-href="{{item1.url}}">{{item1.url}}</a>
    </p>
  </div>

  <div>
    <h1>Example from ng-init</h1>
    <div ng-init="item2 = {'url':'http://www.example.com/file-&#225;&#250;&#243;.pdf'}"></div>
    <p>Link (href): <a href="{{item2.url}}">{{item2.url}}</a>
    </p>
    <p>Link (ng-href): <a ng-href="{{item2.url}}">{{item2.url}}</a>
    </p>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', ['$scope',
      function($scope) {
        $scope.item1 = {
          'url': 'http://www.example.com/file-&#225;&#250;&#243;.pdf'
        };
      }
    ]);
  </script>
</body>

最佳答案

听起来您需要的是一种用纯 JavaScript 解码 HTML 实体的方法。使用 this 中提供的代码上一个问题与解析“&\amp;”有关作为起点，我做了一个 new fiddle这里展示了如何在不使用 ng-init 的情况下解码 HTML 实体。我还冒昧地删除了额外的代码，因为您没有进行任何编码(从封闭的对象中删除它会更麻烦，而不是值得，因为原始编码器使用该对象做的不仅仅是存储代码) 。另外，这里是示例格式的代码:

<body ng-app="myApp" ng-controller="myCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <div>
    <h1>Example from model json</h1>
    <p>Link (href): <a href="{{htmlEnDeCode.htmlDecode(item1.url)}}">{{htmlEnDeCode.htmlDecode(item1.url)}}</a>
    </p>
    <p>Link (ng-href): <a ng-href="{{htmlEnDeCode.htmlDecode(item1.url)}}">{{htmlEnDeCode.htmlDecode(item1.url)}}</a>
    </p>
  </div>

  <div>
    <h1>Example from ng-init</h1>
    <div ng-init="item2 = {'url':'http://www.example.com/file-&#225;&#250;&#243;.pdf'}"></div>
    <p>Link (href): <a href="{{item2.url}}">{{item2.url}}</a>
    </p>
    <p>Link (ng-href): <a ng-href="{{item2.url}}">{{item2.url}}</a>
    </p>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', ['$scope', function($scope) {
      $scope.item1 = {
        'url': 'http://www.example.com/file-&#225;&#250;&#243;.pdf'
      };
      // Credit to WaiKit Kung for SO answer at https://stackoverflow.com/a/20880789/4504895
      $scope.htmlEnDeCode = (function() {
        var charToEntityRegex,
          entityToCharRegex,
          charToEntity,
          entityToChar;

        function resetCharacterEntities() {
          charToEntity = {};
          entityToChar = {};
          // add the default set
          addCharacterEntities({
            '&amp;': '&',
            '&gt;': '>',
            '&lt;': '<',
            '&quot;': '"',
            '&#39;': "'"
          });
        }

        function addCharacterEntities(newEntities) {
          var charKeys = [],
            entityKeys = [],
            key, echar;
          for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
          }
          charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
          entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
        }

        function htmlDecode(value) {
          var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
          };

          return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
        }

        resetCharacterEntities();

        return {
          htmlDecode: htmlDecode
        };
      })();
    }]);

  </script>
</body>

关于javascript - 如何将带有重音字符的 url 从 Angular Controller 输出到 href 属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41739295/

26 4 0
文章推荐： javascript - 通过扩展来覆盖函数并根据条件执行扩展函数
文章推荐： c++ - 为什么要删除不可复制类型的 operator=？
文章推荐： c++ - 如何使用 C++ 从 .exe 读取/写入 asm 寄存器？
文章推荐： html - Google Chrome 下的 CSS 问题(文本框和按钮)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com