значение атрибута доступа внутри недирективно функции контроллера

Question

содержание

HTML,

<button data-href="helloworld">Show href Value</button> 

содержание Js,

$("body").on('click', 'button', function(){ 
    console.log($(this).attr("data-href")); 
}); 

Печатается

helloworld 

в консоли. Я проникаю выше код для angularjs,

<div ng-controller="hello"> 
    <button data-href="helloworld">Show href Value</button> 
</div> 

var app = angular.module('app', []); 

app.controller("hello", function(){ 
    //someone help me with the services that are to be injected and 
    //and what logic goes here to print the data-href attribute value 
}) 

Может кто-то помочь мне с аргументами и содержанием функциональных hello контроллера?

Answer 1

Если вы переключитесь на AngularJS, вам нужно будет полностью переосмыслить свое приложение - сложно сделать полный пересмотр существующего приложения, использующего выбор и DOM-манипуляцию. Угловые обычно используются, чтобы избежать этих проблем. Таким образом, вы должны задать себе , почему вам нужно привязать к событию, а не использовать привязки данных/модель представления.

Это слишком много, чтобы войти сюда, поэтому, чтобы решить вашу непосредственную проблему, вы можете использовать директиву.

<button show-href="helloworld">Show href Value</button> 

// `data-` prefixes stripped from directives as part of Angular normalization 
app.directive("showHref", function() { 
    return function (scope, elem, attr) { 
     elem.bind("click", function() { 
      console.log(attr.showHref); 
     }); 
    }; 
}); 

Answer 2

Угловой способ был бы определить значение в области контроллера

<button data-href="{{myUrl}}" ng-click="helloClick()">Show href Value</button> 
.... 
app.controller("hello", function($scope){ 
    $scope.myUrl = 'helloworld'; 
    $scope.helloClick = function(){ 
      console.log($scope.myUrl); 
    } 
}) 

Однако, если вам действительно нужно определить data-href из HTML и получить доступ к нему в угловом коде, который вы должны рассмотреть возможность использования directive вместо контроллера

Answer 3

var $scope; 
var app = angular.module('miniapp', []); 

function Ctrl($scope) { 
    $scope.clickEvent = function(obj) { 

     // Log the obj to see everything 
     console.log(obj); 

     // Alert just the data value 
     alert(obj.target.attributes.data.value); 

    } 
}; 

HTML

<div ng-app="miniapp"> 
    <div ng-controller="Ctrl"> 
     <a ng-click="clickEvent($event)" class="exampleClass" id="exampleID" data="exampleData" href="">Click Me</a> 
    </div> 
</div> 

JSFIDDLE