Winkel js Änderung Inhalt Link

Question

Im Moment habe ich dies:

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

Es funktioniert gut, aber jetzt will ich ändern Der Inhalt auf klicken Sie auf einen a-Tag-Link Link:

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

Kann mir jemand sagen, wie ich das machen kann?

Answer 1

Für einfache Funktion aufrufen Textänderungen zu machen, würde ich persönlich seit # haveing ​​mit ng-click="" statt <a href="#"></a> empfehlen generell für route changes in AngularJS ist.

Nach Ihrer Erklärung nehme ich an, dass Sie einige HTML-Codes von anderer Website ziehen und plötzlich wird Angular einfach nicht funktionieren. Für ng-bind-html müssen Sie es since it is consider unsafe to ng-bind HTML code 'sterilisieren'.

Dennoch, hier ist der Code denke ich, dass Arbeit für Sie

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

Edit: Abstand und Fehler

Answer 2

Es einfach ist Sie können {{}} verwenden, um es zu binden. Es ist auch als Doppelbindungs ​​

<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> 

Same bekannt hier können Sie Winkel Umfang nutzen die Ansicht

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

Wie Winkel Update der Ansicht oder Inhalt zu aktualisieren?

Angular Einsatz Uhr und es sehen alle Bereiche so was auch immer Wert auf den Umfang weitergegeben Winkel wird die Ansicht oder es ist Inhalt

den Digest-Zyklus und Update auslösen Wenn Sie Bindung verwenden Single Sie könnten einfach setzen :: zu diesem {{:: yourLink}} Es macht eckig weniger zu sehen und effektiv zu arbeiten