Angular i dynaminczny ng-click

Question

Cześć, chce aby button przyjął dynamiczna nazwę

<button class="details" ng-click='{{boot.click}}'>Szczegóły</button>

 

 $scope.boot = 
    [
        {
            name: "Wyprzedaż1",
            price: '100',
            image: 'adidas/adidas1',
            click: 'alert()'
        }
$scope.alert = function(){
        alert('elo');
    };

Nie wiem dlaczego ale nie działa mi to, oczywiście uzywam kontrolera i wszystko co potrzebne, wyskakuje taki błąd

angular.js:14525 Error: [$parse:syntax] http://errors.angularjs.org/1.6.4/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bboot.click%7D%7D&p4=%7Bboot.click%7D%7D
    at angular.js:38
    at s.throwError (angular.js:15090)
    at s.object (angular.js:15079)
    at s.primary (angular.js:14968)
    at s.unary (angular.js:14956)
    at s.multiplicative (angular.js:14943)
    at s.additive (angular.js:14934)
    at s.relational (angular.js:14925)
    at s.equality (angular.js:14916)
    at s.logicalAND (angular.js:14908) "<button class="details" ng-click="{{boot.click}}">"

 

Comments

dobra juz wszystko śmiga, sorry ale to juz 12h dzis przed kompem :D

---

Jeszce mam pytanko, bo chciałem teraz własnie aby ta funkcja ng-click zmieniła diva z display none na block, to zadziałało, w niej umieściłem {{name}} i w funkcji zapisałem $scope.name = "name";

i nie działa nie pojmuje, konsola 

TypeError: Cannot set property 'name' of undefined
    at Object.$scope.adidas1 [as click] (angular.js:26)
    at fn (eval at compile (angular.js:15358), <anonymous>:4:167)
    at e (angular.js:26994)
    at b.$eval (angular.js:18161)
    at b.$apply (angular.js:18261)
    at HTMLButtonElement.<anonymous> (angular.js:26999)
    at hg (angular.js:3734)
    at HTMLButtonElement.d (angular.js:3722)

  $scope.adidas1 = function($scope){
        productDetails.style.display = "block";
        $scope.name = "name";
    };
    $scope.wyprzedaz = 
    [
        {
            name: "Wyprzedaż1",
            price: '100',
            image: 'adidas/adidas1',
            click: $scope.adidas1
        }
   ]

HTML 
<h2>{{name}}</h2>

 

---

 zmieniła diva z display none na block

Nie manipuluj DOMem z poziomu kontrolera ani widoku. Do tego służą ng-if, ng-show i ng-hide. Albo stwórz własną dyrektywę.

 Czym jest productDetails? Dlaczego do metody $scope.adidas1 przekazujesz obiekt $scope (błąd wskazuje na to, że nie ma on property name)? Jeśli to jest wywoływane przez ng-click, to możesz posłać obiekt $event, który jest angularowym aliasem dla natywnego eventa. Tylko, że tam też pewnie nie będzie property name.

Pokaż jeszcze, jak to zapisałeś z ng-click.

---

Tym otwieram diva 

<button class="details" ng-click="boot.click()">Szczegóły</button>

A tu to 

    $scope.adidas1 = function($scope){
        productDetails.style.display = "block";
        $scope.name = "name";
    };

A tu div w ktorym chcialem podmienic zawartosc

<div class="product-details" id="productDetails" ng-controller="search">
    <h2>{{name}}</h2>
</div>

 

---

O ile nie zmieniłeś kodu, to ng-click="boot.click()" uruchamia metodę $scope.adidas1, która jest podpięta pod property click w obiekcie znajdującym się w tablicy. Wywołujesz tą metodę bez parametrów w ng-click, a w jej nagłówku zapisujesz, że chcesz argument $scope. Jak już pytałem poprzednio - dlaczego taki argument chcesz tam mieć? Obiekt $scope masz dostępny w kontrolerze przez dependency injection, więc on będzie obecny też i w tej funkcji. Błąd pojawia się dlatego, że zmienna lokalna $scope (która ma wartość undefined, bo wywołujesz funkcję bez parametru) nadpisuje obiekt $scope (poczytaj o zmiennych lokalnych w JavaScript), więc nie ma tam property name.

Wyrzuć style.display i użyj wspomnianych dyrektyw do usuwania/ukrywania elementów ng-if/ng-hide, a je zasilaj flagami (true/false).