Проблема с приложением AngularJS при изменении DOM

У меня есть Webapp, который после каждой щелчки меняет кнопку. Каждый клик изменит кнопку, обратившись к содержимому с другого сервера. Однако он останавливается после первого щелчка. Я прошу совета и помощи в этом отношении. Коды заключаются в следующем.Проблема с приложением AngularJS при изменении DOM

HTML:

<script src="app.js"></script> 
</head> 

<body ng-app="myApp"> 
    <div id="divcont" ng-controller="OpenLink"> 
    <button ng-click="openLink('text1')">Change Link</button> 
    </div> 
</body>

JavaScript: app.js

var myapp = angular.module('myApp', []); 
myapp.controller('OpenLink', ['$scope', '$http', OpenLink]); 

function OpenLink($scope, $http) { 
    $scope.openLink = function(s) { 
    var elink = "http://10.0.0.1:8080/" + s + ".txt"; 
    alert("ELINK is " + elink); 
    $http.get(elink) 
     .then(function(response) { 
     document.getElementById("divcont").innerHTML = response.data; 
     }, function(response) { 
     alert("Error"); 
     }); 
    } 
}

The удаленные файлы и их содержание являются

text1.txt содержит "<button ng-click="openLink('text2')">Text 1 </button> "
text2.txt содержит "<button ng-click="openLink('text3')">Text 2</button>"
text3.txt содержит "<button ng-click="openLink('text1')">Text 3</button>"

Как я могу заставить его работать?

источник

2016-10-13 rajkumar58

Любые ошибки в консоли JavaScript? Если это не так, ваша функция обработчика ошибок должна быть встроена путем вывода самой ошибки. Прямо сейчас он скроет его. Во-вторых, вы никогда не должны выполнять прямые манипуляции с DOM ('' document.getElementById ("divcont"). InnerHTML = response.data; '') из угловых контроллеров. https://docs.angularjs.org/tutorial – tiblu

@ rajkumar58, вы решили свою проблему? –

Да !!! ... Оба решения работали .. – rajkumar58

Перед тем, как вставить возвращенный html в DOM, вам нужно указать Угловое обрабатывать этот кусок html, найти директивы (ng-click) и настроить наблюдатели и привязки. Этот процесс называется компиляцией и связыванием и выполняется с использованием службы $compile. Вот как эта услуга может быть использована в вашем примере:

function OpenLink($scope, $http, $compile) { 
    $scope.openLink = function(s) { 
    var elink = "http://10.0.0.1:8080/" + s + ".txt"; 
    alert("ELINK is " + elink); 
    $http.get(elink) 
     .then(function(response) { 
     // you need to compile html first 
     var compiledHTML = $compile(response.data)($scope)[0]; 
     document.getElementById("divcont").appendChild(compiledHTML); 
     }, function(response) { 
     alert("Error"); 
     }); 
    } 
}

Как @tiblu упоминалось, это не хорошая идея, чтобы манипулировать DOM внутри контроллера. Лучше использовать специальную директиву в этом отношении. Но даже внутри пользовательской директивы вам все равно придется скомпилировать содержимое, возвращенное с сервера, перед добавлением его в DOM.

источник

2016-10-13 20:18:57

Вы также можете использовать обычные файлы HTML вместо TXT-файлов и использовать ng-include. Затем он должен быть более угловатым. HTML:

<div id="divcont" ng-controller="OpenLink" ng-include="includedFile"></div>

app.controller('OpenLink', ['$scope', OpenLink]); 

    function OpenLink($scope){ 
    $scope.includedFile = 'init.html'; 
    $scope.openLink = function (s) { 
     var elink = s + ".html"; 
     $scope.includedFile = elink; 
     console.log("ELINK is " + elink); 
    } 
    }

Я добавил первоначальный HTML как init.html файл для удобства

plunker: http://plnkr.co/edit/OzZexJmFlxU3GyxscuoY?p=preview

источник

2016-10-13 20:34:14 Andriy

Проблема с приложением AngularJS при изменении DOM

ответ

Смежные вопросы