Angular-JS изменить содержание по ссылке

Question

Angular-JS изменить содержание по ссылке

0

На данный момент у меня есть это:

HTML-Script

<div ng-app="home" ng-controller="customersCtrl"> 
    <div ng-bind-html="home" id="content">{{content}}</div>
</div>

JS-Script

angular.module('home', []).controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
    $http.get("http://www.example.de/home/").success(function (response) {
        document.getElementById("content").innerHTML = response;
    });
}]);

Он работает нормально, но теперь я хочу изменить контент, нажав ссылку на ссылку тега:

<a href="#home/">Home</a> | <a href="#user/">User</a>

Может ли кто-нибудь сказать мне, как я могу это сделать?

padhie 08 авг. 2016, в 23:10

Источник

0

Вы отправите новый http запрос на получение доступа по этим ссылкам? Например " example.de/user " для <a href="#user/"> пользователя </a> и " example.de/home " для <a href="#home/"> дома </a>?
oguzhan00 08 авг. 2016, в 20:41

Теги:

javascript

angularjs

2 ответа

0

Просто вы можете использовать {{}}, чтобы связать его. Он также известен как двойное связывание

 <div ng-app="home" ng-controller="customersCtrl"> 
        <div ng-bind-html="home" id="content">{{content}}</div>
    </div>

<a ng-href="{{yourLink}}">Home</a>
Just for demonstrate 
<button ng-click="yourLink = 'foo'">change the link</button>

Здесь вы можете использовать угловую область для обновления вида

  angular.module('home', []).controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $http.get("http://www.example.de/home/").success(function (response) {
            $scope.content = response;
        });
    }]);

Как угловое обновление представления или контента?

Часы с угловым использованием, и он наблюдает за всеми областями, поэтому любое значение, которое будет передано в угловое значение области, вызовет цикл дайджеста и обновит представление или его содержимое

Если вы хотите использовать единую привязку, вы можете просто поставить :: на этот {{:: yourLink}}. Сделать угловое меньше, чтобы смотреть и эффективно работать

Jorawar Singh 08 авг. 2016, в 19:01

Ещё вопросы

Вы отправите новый http запрос на получение доступа по этим ссылкам? Например " example.de/user " для <a href="#user/"> пользователя </a> и " example.de/home " для <a href="#home/"> дома </a>?

Taiwei Tuan · Accepted Answer · 2016-08-08T20-01-00.000Z

Для простой функции, вызывающей внесение изменений в текст, лично я рекомендовал бы использовать ng-click="" а не <a href="#"></a> поскольку hasing # обычно используется для изменения маршрута в AngularJS.

Согласно вашему объяснению, я предполагаю, что вы вытаскиваете некоторые коды HTML с другого сайта, и вдруг Angular просто не будет работать. Для ng-bind-html вам нужно "дезинформировать" его, поскольку он считает небезопасным для ng-bind HTML-код.

Тем не менее, вот код, который, я думаю, будет работать для вас

HTML:

<div ng-app="myApp" ng-controller="customersCtrl" ng-init="content='test'"> 
    <div ng-bind-html="content | sanitize"></div>
    <a ng-click="changeContent('home')">Home</a> | <a ng-click="changeContent('user')">User</a>
</div>

Javascript:

angular.module('myApp', [])
    .filter('sanitize', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }])

    .controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.changeContent = changeContent;

        function changeContent (content){
            if(content ==='home'){
                $http.get("http://www.example.de/home/").success(function (response) {
                    $scope.content = response;
                });            
            } else {
                // ......
            }
        }
    }]);

Изменение: интервалы и опечатки