Simplest way to pass data into directive Angular JS

Problem

I want to pass an some data into my directive so that I can use to as a parameter for my service. I tried something which I am not sure of. I have no idea. I need to know how could I pass data into the directive so that I could use it. Here i want to pass the ID so i can use it in the factory The JAVASCRIPT file :

  var classificationViewModule = angular.module('ald.classificationview',[]);

    classificationViewModule.factory('classificationAPI',function(){
        return {
            getClassification:function($http,artifactId){
                //TODO add URL
                var url = "Classification/getInfo?artifactId="+artifactId
                return $http({
                    method: 'GET',
                    url: url
                });
            }
        };
    });

classificationViewModule.directive('classificationview', function () {
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function ($scope, element, attributes) {     
            $scope.artifactId = attribute["artifactId"];

        },
        controller: function ($scope, $http, classificationAPI) {

            classificationAPI.getClassification($http).success(function(data,status){               
                //TODO
                $scope.artifactClassification = data;
            }).error(function(data,status){
                if (404==status){
                    alert("no text");
                } else {
                    alert("bad stuff!");
                }
            });            
        },
        //TODO add template url
        templateUrl: "classificationviewer.html"
    };
});

In the HTML file. When I call the directive it should pass this value which can be used in teh factory method to request data :

<classificationview artifactId="6450"/> 
Problem courtesy of: krs8785

Solution

This should help with debugging:

classificationViewModule.directive('classificationview', function () {
    return {
        restrict: 'EA',
        scope: {
             artifactId: "@" // add it to scope with two way binding
        },
        replace: true,
        link: function ($scope, element, attributes) {     
            //$scope.artifactId = attributes["artifactId"]; // is this defined?

            $scope.artifactId = attributes.artifactId;
        },
        controller: function ($scope, $attrs, $http, classificationAPI) {
            // console.log($scope.artifactId, "...", scope.artifactId); // what's this output
            //how about
            $scope.artifactId = $attrs.artifactId;
            setTimeout(function () {
                console.log($scope.artifactId, '...', $attrs.artifactId); // this should return the actual value...
            }, 1000);

            classificationAPI.getClassification($http).success(function(data,status){               
                //TODO
                $scope.artifactClassification = data;
            }).error(function(data,status){
                if (404==status){
                    alert("no text");
                } else {
                    alert("bad stuff!");
                }
            });            
        },
        //TODO add template url
        templateUrl: "classificationviewer.html"
    };
});

Update, just noticed, the HTML should be with a hyphen:

 <classificationview artifact-id="6450"/> 

instead of

<classificationview artifactId="'6450'"/> <!-- string --> 

Explanation

 // attribute in JS: myAttributeName
 // attribute in HTML: my-attribute-name
Solution courtesy of: SoluableNonagon

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.