HTML dosyası yerine JS dosyasına ng tıklama yönergesi koyabilir miyim ve nasıl yapmalıyım?

JS kodu:

var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {
    $scope.names = ['Larry', 'Curly', 'Moe'];

    $scope.removeName = function(name) {
        var i = $scope.names.indexOf(name);
        $scope.names.splice(i, 1);
    };
});

HTML Kodu:


    <body ng-controller="NameCtrl">
        
    </body>
</html>

Bu sadece örnek bir koddur. HTML dosyasında HTMl dosyası yerine ng tıklama yönergesi koyabiliyor muyum ve bunu nasıl yapmalıyım bilmek istiyorum. Mantığı HTML'den ayırırken örnekte yaptığım şeye benzer bir şey.

$(a).click(function(){
    $(this).removeName(name);
}
3
Yapabilirsin, ama biraz çılgın kodlamaya ihtiyacın var. html öğesini dizinize koymak ve ng-yinelemesine bağlamak için
katma yazar Ramesh Rajendran, kaynak
Bu önemsiz vaka için değil. Zaten iyi çalışan bir çekirdek ng-click yönergesinin yerini alacak bir yönergeye ihtiyacınız olacaktır. Sorunlarınız daha karmaşıksa, sorunu basitleştirdiniz.
katma yazar charlietfl, kaynak
Bunu neden yapmak istiyorsun? Ng-click, ne istediğinizi kesiyor. Bir direktif neden yönlendirilmelidir?
katma yazar netrevisanto, kaynak

7 cevap

"I want to know if I can put ng-click directive in JS file instead of HTMl file..."

Kesinlikle direktiflere yer html no js. jQuery kullandığınızda html kodunuz gibidir

<input type="button" value="x" id="test" onclick="$(this).removeName(name)"/>

Ve senin jsinde istediğin mantığı uygula.

Açısal olarak çok benzer. ng tıklama onclick'e eşdeğerdir. Html kodunuzda direktifiniz var ve kontrol cihazınızda mantığı uygularsınız. Açısal olarak neden karıştırmak istediğinizi anlamıyorum.

Kısacası, bunu yapmanıza gerek yok, bunu yapmamalısınız.

2
katma

"I want to know if I can put ng-click directive in JS file instead of HTMl file..."

Kesinlikle direktiflere yer html no js. jQuery kullandığınızda html kodunuz gibidir

<input type="button" value="x" id="test" onclick="$(this).removeName(name)"/>

Ve senin jsinde istediğin mantığı uygula.

Açısal olarak çok benzer. ng tıklama onclick'e eşdeğerdir. Html kodunuzda direktifiniz var ve kontrol cihazınızda mantığı uygularsınız. Açısal olarak neden karıştırmak istediğinizi anlamıyorum.

Kısacası, bunu yapmanıza gerek yok, bunu yapmamalısınız.

2
katma

Olayı jQuery yoluna bağlamak yerine ng-click kullanmayı tercih ederim.

Ancak, sorduğunuz gibi: denetleyicinizin $ öğesini enjekte edebilir ve on etkinliğine bağlayabilirsiniz.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var app = angular.module("click", []);
app.controller("ctrl", function($scope, $element) {
    $element.on("click", function() {
        alert("clicked!");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="click">
  <div ng-controller="ctrl">
    <input type="text" />
  </div>
</div>
</div> </div>
2
katma
@leanansith Rica ederim! Ama sonuçta işe yaramadı mı? Eğer öyleyse, bu cevabı onay işareti üzerine tıklayarak doğru olanı kabul etmeyi düşünebilirsiniz.
katma yazar falsarella, kaynak
Yardımın için çok teşekkürler!
katma yazar nixealice, kaynak
Evet, işe yaradı. Ve siteyi kullanma talimatları için teşekkürler. Onay işareti gider!
katma yazar nixealice, kaynak

Olayı jQuery yoluna bağlamak yerine ng-click kullanmayı tercih ederim.

Ancak, sorduğunuz gibi: denetleyicinizin $ öğesini enjekte edebilir ve on etkinliğine bağlayabilirsiniz.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var app = angular.module("click", []);
app.controller("ctrl", function($scope, $element) {
    $element.on("click", function() {
        alert("clicked!");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="click">
  <div ng-controller="ctrl">
    <input type="text" />
  </div>
</div>
</div> </div>
2
katma
@leanansith Rica ederim! Ama sonuçta işe yaramadı mı? Eğer öyleyse, bu cevabı onay işareti üzerine tıklayarak doğru olanı kabul etmeyi düşünebilirsiniz.
katma yazar falsarella, kaynak
Yardımın için çok teşekkürler!
katma yazar nixealice, kaynak
Evet, işe yaradı. Ve siteyi kullanma talimatları için teşekkürler. Onay işareti gider!
katma yazar nixealice, kaynak

Bunu ng-bind-Html ile yapabilirsiniz, ancak örneğim çılgın gibi görünüyor. ama Htmltarafında ng-click kullanmadan çalışıyorum.

var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {      

    $scope.names = ['Larry', 'Curly', 'Moe'];

        $scope.ValOfRept = [];
        for (var x = 0; x < $scope.names.length; x++) {
            var element = 'remove';
            var obj = { "name": $scope.names[x], "element": element };
            $scope.ValOfRept.push(obj);
        }


        $scope.removeName = function (name) {
            var i = $scope.names.indexOf(name);
            $scope.ValOfRept.splice(i, 1);
        };

});
nameApp.filter('to_trusted', ['$sce', function ($sce) {
     return function (text) {
         return $sce.trustAsHtml(text);
     };
 }]);;

Html

<div ng-repeat="valofrept in ValOfRept">
        {{valofrept.name}}
      <div ng-bind-html="valofrept.element  | to_trusted"></div>
        
</div>
1
katma

Bunu ng-bind-Html ile yapabilirsiniz, ancak örneğim çılgın gibi görünüyor. ama Htmltarafında ng-click kullanmadan çalışıyorum.

var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {      

    $scope.names = ['Larry', 'Curly', 'Moe'];

        $scope.ValOfRept = [];
        for (var x = 0; x < $scope.names.length; x++) {
            var element = 'remove';
            var obj = { "name": $scope.names[x], "element": element };
            $scope.ValOfRept.push(obj);
        }


        $scope.removeName = function (name) {
            var i = $scope.names.indexOf(name);
            $scope.ValOfRept.splice(i, 1);
        };

});
nameApp.filter('to_trusted', ['$sce', function ($sce) {
     return function (text) {
         return $sce.trustAsHtml(text);
     };
 }]);;

Html

<div ng-repeat="valofrept in ValOfRept">
        {{valofrept.name}}
      <div ng-bind-html="valofrept.element  | to_trusted"></div>
        
</div>
1
katma

angular.element() öğesini $() yerine kullanabilirsiniz.

Basit kod:


ve js’de

angular.element("#clickme").bind("click", function(e){
          $scope.removeName();
       });
0
katma
Gönderinizi tekrar kontrol edin ... html'nin hala ng-click olması gerekiyor mu? Buradan $ scope.removeName (); name parametresini nereden alır?
katma yazar falsarella, kaynak