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

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. Angular обычно используется, чтобы избежать этого. Таким образом, вы должны спросить себя, почему вам нужно привязать к событию, а не использовать привязки данных / модель представления.

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

<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 и получить доступ к нему в угловом коде, который вы должны рассмотреть, используя директиву вместо контроллера

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