相关疑难解决方法(0)

我有一些html数据,我从一个json文件加载.

我在我的应用程序中使用ngSanitize并使用ng-bind-html显示此html数据.

现在我想从标准转换json blob中的任何链接

• <a href="some_link">link</a>

至:

• <a ng-click="GotoLink('some_link','_system')">link</a>.

所以我在json文件上做了一些regExp来转换链接,但是由于某些原因,ng-bind-html过滤了输出中的ng-click,我无法弄清楚原因.它是否应该这样做,如果是这样可以禁用此行为？

看看这个jsFiddle进行演示:http: //jsfiddle.net/7k8xJ/1/

有任何想法吗？

我对Angular很新,但过去几周我一直在使用它,并设法解决了我遇到的大部分问题.然而,这个让我难过.

我有一个应用程序从Twitter接收推文然后 - 使用角度过滤器 - 拉出所有网址并将它们设置为链接.这部分工作正常,但客户认为来自Twitter的链接不安全所以他们想要在每次点击链接时触发免责声明.很简单 - 我劫持了链接并换了href一个ng-click="openLink('url')".这是问题发生的地方 - ng-click不起作用.

我很确定这个问题与之有关$compile()- 我之前遇到过类似的问题 - 但我不知道何时何地调用它.

我创造了一个Plunkr,它是我所追求的精简版.顶部的链接未动态加载并激活alertUrl()函数,但过滤器生成的所有链接都失败.

我可能错过了一些非常简单的东西,但它现在一直困扰着我,所以任何帮助都会受到大力赞赏.

谢谢,
山姆

我创建了一个显示消息的指令,并且它可以呈现任何带有角度属性的html消息,它可能包括按钮,锚标签(带有ng-clicks属性)等等.

index.html的:

<ir-error-panel status="status"></ir-error-panel>

irErrorPanel.tpl.html:

<div >
    THE MESSAGE IS:<BR>
    <div ng-bind-html="textHtmlSafe"></div>
    </BR>
</div>

irErrorPanel.js:

angular.module('ng-iridize-common.directives').directive('irErrorPanel', ['$sce', function($sce) {
    return {
        restrict: 'E',
        templateUrl: 'irErrorPanel.tpl.html',
        controller: ['$scope', '$log', function($scope, $log) {

            var _this = this;

            _this.applyMessageText = function applyMessageText() {
                $scope.textHtmlSafe = $scope.status && $scope.status.text ? $sce.trustAsHtml($scope.status.text) : "";
            };

            _this.applyMessageText();

            $scope.$watch("status.text", function(newValue, oldValue) {
                if (newValue === oldValue) {
                    return;
                }
                if (!newValue) {
                    $scope.textHtmlSafe = "";
                    return;
                }
                _this.applyMessageText();

            });


        }],
        link: function(scope, iElement, iAttrs, ctrl) {
            //call …

我是AngularJS领域的新人,当然我正在做错事.所以,这是我的问题:我有一个小聊天小部件,它通过PHP API从JSON获取数据.在我的JSON中,我提供了包装器和一些ng*标签的所有消息.我遇到的问题是不会对这些元素触发ng-click操作.html块注入了ng-bind-html.

这是我的角度应用程序:

var chat = angular.module("chat", ['ngDialog']);

chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {

    $scope.messages = "";


    $scope.getData = function() {
        $http.get("/url/to/api")
            .success(function(data, status, headers, config) {
                $scope.messages = data.html;
            }).error(function(data, status, headers, config) {
                //alert("AJAX f   ailed!");
            });
    };

    $scope.getData();

    $scope.getHtml = function(html){
        return $sce.trustAsHtml(html);
    };

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function(){
        $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
        }, 5000)
    };


    // Kick off the interval
    $scope.intervalFunction();

    $scope.messageAdminTools = function(message_id)
    {
        console.log("called");
        var template …

我正在使用角度和角度材料编写企业应用程序,并且对中等大小(在我看来)形式的性能有问题.特别是在IE中.

(工作演示,请参阅https://codepen.io/tkarls/pen/vGrqWv.点击卡片标题,然后在打开之前暂停一下.特别是使用IE和移动设备.桌面镀铬工作得非常好.)

表格中最严重的违规者似乎是一些md选择,他们使用ng-repeat.

<md-select ng-model="form.subchannelId" ng-disabled="vm.readOnly">
    <md-option ng-repeat="id in subchannelIds" value="{{::id}}">{{::id}}</md-option>
</md-select>
<md-select ng-model="form.serviceReference" ng-disabled="vm.readOnly">
    <md-option ng-repeat="id in serviceReferences" value="{{::id}}">{{::countryId}}{{::id}}</md-option>
</md-select>
<md-select ng-model="form.audioCodec" ng-disabled="vm.readOnly">
    <md-option ng-repeat="audioCodec in audioCodecs | orderBy:'toString()'" value="{{audioCodec}}">{{::systemVariables.encoders.aac[audioCodec].displayName}}</md-option>
</md-select>
<md-select ng-model="form.audioSource" ng-disabled="vm.readOnly">
    <md-option ng-repeat="audioSource in audioSources | orderBy:'toString()'" value="{{audioSource}}">{{audioSource}}</md-option>
</md-select>
<md-select ng-model="form.padSource" ng-disabled="vm.readOnly">
    <md-option ng-repeat="padSource in padSources | orderBy:'toString()'" value="{{::padSource}}">{{::padSource}}</md-option>
</md-select>
<md-select ng-model="form.lang" ng-disabled="!form.generateStaticPty || vm.readOnly">
    <md-option ng-repeat="langKey in langKeys | orderBy:'toString()'" value="{{::langs[langKey]}}">{{::langKey}}</md-option>
</md-select>
<md-select ng-model="form.pty" ng-disabled="!form.generateStaticPty || vm.readOnly">
    <md-option ng-repeat="ptyKey in ptyKeys | orderBy:'toString()'" …

在我正在处理的应用程序中,服务为应用程序提供了一个包含HTML的json.我在这样的模板中输出HTML:

<div ng-bind-html="renderHtml(widget.article.body)"></div>

此HTML可能包含自定义指令,如内联图表:

directiveModule.directive('inlineChart', function(){
    return {
        restrict: 'A',
        scope: { inline-widget:'=elem' },
        template: '<p ng-bind="inline-widget.blah"></p>'
    };
});

如果我在模板中正常使用该指令,一切正常,但在使用带有renderHtml函数的ng-bing-html时似乎没有被触及.

任何有关如何实现这一点的建议都非常感谢!