角度指令参数问题

Question

I am creating a directive which will take the arguments passed to it from html and populate the fields in the template. The code for directive is like below.

(function(){ 
    angular.module("MyApp",{})
    .directive("myDirective",function(){
        var MyLink = function(scope,element,attr){
            scope.title = attr.title;
        }
        return{
             restrict : 'EA',
             transclude:true,
             templateUrl:"directive.html",
             link:MyLink
        }
    });
}())

The directive.html is like

<div >
<span data-ng-bind="title"></span>
</div>

The main page is like

<div  ng-app="IndexApp" ng-controller="IndexController">
        <my-directive title="hello"></my-directive>
this is a test
    </div>

My issue is that why is hello not getting displayed ?

Link to plunker is here

Answer 1

Your module declaration was wrong, you were using {} instead of [] . If you also wanted to declare the directive in another module then you need to add the dependency to your indexApp (I've done so in this plunker).

http://plnkr.co/edit/s02VmgFfWhstmVhVVrUa?p=preview

index.js

(function(){
   angular.module("IndexApp",['myDirectives'])
   .controller("IndexController",function($scope){
    $scope.title = "this is to test";
   });
}())

directive.js

(function(){

    angular.module("myDirectives", [])
    .directive("myDirective",function(){
        var MyLink = function(scope,element,attr){
            scope.title = attr.title;
        }
        return{
             restrict : 'EA',
             templateUrl:"directive.html",
             link:MyLink
        }
    });
}())