Question

目前我有这个：

HTML脚本

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

JS脚本

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-tag链接链接上的内容：

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

有人能告诉我怎么做吗？

Answer 1

对于简单的函数调用以进行文本更改，我个人建议使用ng-click=""而不是<a href="#"></a>，因为在{8}中，{AngnerJS中的route changes只有#。

根据你的解释，我假设你从其他网站上提取了一些HTML代码，突然间Angular刚刚开始工作。对于ng-bind-html，您需要清理＆＃39;它since it is consider unsafe to ng-bind HTML code。

尽管如此，以下是我认为适合您的代码

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 {
                // ......
            }
        }
    }]);

编辑：间距和拼写错误

Answer 2

很简单，您可以使用{{}}绑定它。它也被称为双重绑定

 <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;
        });
    }]);

角度如何更新视图或内容？

Angular使用手表并观察所有范围，无论价值如何   被传递到范围角度将触发摘要周期和   更新视图或其内容

如果你想使用单一绑定，你可以简单地把::放到这个{{:: yourLink}} 它使角度更小，无法观察和有效地工作

angular-js改变链接上的内容

2 个答案: