Keskustelu: Nettisivujen teko: AngularJS: Mallin päivitys innerHTML:n muuttuessa?

Vaikea selittää mutta jos joku pääsee ideasta kärrylle niin voi kysyä lisäki :)

Miten saan "päivitettyä" Seuraavan näppärästi. Ideana on että on kaksi select formia. Select1 on teksti ja Select2 kielenvaihto(. Samalla Select1 teksti näkyy erillisessä paikassa.

Select1 tiedot haetaan Ajaxilla php tiedostosta (lisää vain näitä lisää <option></option>.

Select1 tekstit vaihtuu hienosti kielestä toiseen mutta AngluraJS ei päivitä sitä toiseen paikkaan ennenkuin käyn vaihtamassa Select1 vaihtoehtoa toiseen.

Tähän pitäis saada joku refresh tai vastaava? Jquery(kokeiltu kaikenlaista)?

Tässä näytetään {{valitseteksti}}


<select class="valitseteksti" name="valitseteksti" id="valitseteksti" ng-model="valitseteksti">
</select>

<select class="kieli" name="kieli" id="kieli" onchange="haekieli(this.value);" >
 					 <option><? echo $lang['valitsekieli']; ?></option>
 					 <option value="fi"><? echo $lang['suomi']; ?></option>
					 <option value="en"><? echo $lang['english']; ?></option>
</select>

function haekieli(str) {
  		if (str.length == 0) {
        document.getElementById("valitseteksti").innerHTML = "<option></option>";
        return;
  	 	 } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                document.getElementById("valitseteksti").innerHTML = this.responseText;

            }
        }
		var $numero = $('#valitseteksti_hidden').val();
		if ($numero==null) {$numero='0';}
        xmlhttp.open("GET", "haku.php"+str+"&nykyinen_kielihaku="+$numero, true);
        xmlhttp.send();

   		 }
		};

Tuossa nyt vain korvaat selectin sisältämän HTML-koodin, joten on ihan turha odottaakaan, että mitään muuta tapahtuisi.

En tiedä tarkemmin AngularJS-filosofiasta, mutta ainakin tällainen näyttäisi toimivan:

var select = document.getElementById("valitseteksti")
var i = select.selectedIndex
select.innerHTML = xmlhttp.responseText
select.selectedIndex = i
select.dispatchEvent(new Event("change"))

En oikein ymmärrä miksi Angular on edes mukana jos sitä ei käytetä kuin yhteen implisiittiseen value bindiin? Se että joku scope-muuttuja ei päivity tai päivittyy yhden syklin myöhässä johtuu usein siitä että Angular-sovelluksen tilaa käpistellään Angularin ulkopuolelta ja digest-cycle ei triggeröidy. Quick'n'dirty ratkaisu tuollaisessa on triggeröidä scopen päivitys manuaalisesti:

$timeout(function() { $scope.$apply(); });

Mutta eipä tuossa ole edes yhtään kontrolleria johon tuollaisen hackin laittaisi (eikä sitä silloin edes tarvitsisi). Muutenkin jos Angular on mukana niin ajax-pyynnöt kannattaisi tehdä $http-servicellä ja selectin arvot asettaa ng-options direktiivillä. Varsinkin jälkimmäinen on tärkeä jos haluaa että modeli pysyy kärryillä kun optiot muuttuvat.

Tässä on nopea Angular toteutus konseptista, jos nyt yhtään ymmärsin sitä oikein: http://codepen.io/anon/pen/YGjLYR

Siinä on mockattu endpoint ajax-kutsulle "haetekstit.php?kieli=xx" joka palauttaisi valitun kielen tekstit json-listana.