CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Sam
Sam

Reputation: 1331

unable to access $scope value in directive's controller

I have a simple app, but some reason I am unable to access the $scope values in the directive's controller.

app.js

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

controller.js

myApp.controller('controller1',['$scope',function($scope) {
    $scope.helloText = 'text';
}])

directive.js

myApp.directive('myPanel',function(){
    return {
        restrict : "E",
        scope : {
            someText : "="
        },
        templateUrl : 'someTemplate.html'
        controller : function($scope) {
            console.log($scope.someText);// this is undefined
        }
    };
});

someTemplate.html

<h1>This is the text {{someText}}</h1>

main.html 

<div ng-controller="controller1">
    <my-panel someText="helloText"></my-Panel>
</div>

Need some pointers to understand what am I doing wrong?

Upvotes: 1

Views: 325

Answers (1)

CodePrimate
CodePrimate

Reputation: 6666

Your casing is off. 

<my-panel some-text="helloText"></my-Panel>

You can read up on the normalization in guide

Straight from the source

Normalization

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.

Upvotes: 3

Related Questions