AngularJS передает идентификатор в ng-bind-html

Question

AngularJS передает идентификатор в ng-bind-html

0

Итак, у меня есть этот код:
HTML:

<span ng-bind-html="generateNavBar(navBar.common, navBar.common[0])"></span>

AngularJS:

var app = angular.module("myApp", ["ngSanitize"]);

app.controller("MainController", ["$scope", function ($scope){
    $scope.navBar = {
        common: [
            ["Home", "index.html"],
            ["Webpage", "index.html"],
            ["Resources", "index.html"],
            ["Login", "index.html"],
            ["Who we are", "index.html"]
        ]
    }
    $scope.generateNavBar = function (items, current){
        var navigator = '<nav><ul><b>';
        for (i = 0; i < items.length; i++)
        {
            if (items[i] == current)
            {
                navigator += '<a href="' + items[i][1] + '"><li id="current">' + items[i][0] + '</li></a>';
            }
            else
            {
                navigator += '<a href="' + items[i][1] + '"><li>' + items[i][0] + '</li></a>';
            }
        }

        navigator += '</b></ul></nav>';

        return navigator;
    }
}]);

Функция generateNavBar(items, current) используется для создания панели навигации каждой страницы. Функция работает, генерируя html, а затем возвращает его обратно. Он работает нормально, но проблема в том, что он, по-видимому, не может передать id="current" с html, поэтому я попытался передать в style="border-bottom: 1px solid #000" но это тоже не сработало. Я знаю, что это не проблема с генерацией, потому что когда я console.log(navigator) он возвращает HTML с идентификатором в нем. Я сделал что-то неправильно или это просто ограничение AngularJS? Если да, можно ли использовать другой метод?

WebGavDev 20 июль 2016, в 14:32

Источник

0

Вы получаете ошибку, связанную с $ sce
Pankaj Kumar 20 июль 2016, в 11:45
1

Этот код не имеет никакого смысла вообще. Для этого у вас есть ngRepeat , ngSrc и другие встроенные директивы angularjs!
Alon Eitan 20 июль 2016, в 11:46

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Вы получаете ошибку, связанную с $ sce
Этот код не имеет никакого смысла вообще. Для этого у вас есть ngRepeat , ngSrc и другие встроенные директивы angularjs!

Harish Kumar Gaur · Answer 1 · 2016-07-20T10-18-00.000Z

Как указано в Alon Eitan, вам, вероятно, не хватает правильного пути, с помощью которого вы должны использовать угловые директивы js, но все же, как и для вашего кода, вам нужно сначала добавить trustAshtml, когда вы вернете строку

var app = angular.module("myApp", ["ngSanitize"]);

app.controller("MainController", ["$scope","$sce", function ($scope,$sce){
    $scope.navBar = {
        common: [
            ["Home", "index.html"],
            ["Webpage", "index.html"],
            ["Resources", "index.html"],
            ["Login", "index.html"],
            ["Who we are", "index.html"]
        ]
    }
    $scope.generateNavBar = function (items, current){
        var navigator = '<nav><ul><b>';
        for (i = 0; i < items.length; i++)
        {
            if (items[i] == current)
            {
                navigator += '<a href="' + items[i][1] + '"><li id="current">' + items[i][0] + '</li></a>';
            }
            else
            {
                navigator += '<a href="' + items[i][1] + '"><li>' + items[i][0] + '</li></a>';
            }
        }

        navigator += '</b></ul></nav>';

        return  $sce.trustAsHtml(navigator);
    }
}]);

<script src="/angular.min.js"></script>
<script src="/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">

<span ng-bind-html="generateNavBar(navBar.common, navBar.common[0])"></span>

еще одна вещь, которую следует помнить, убедитесь, что ваша угловая версия js и версия с угловым санированием одинаковы.