角度指令参数问题

时间:2015-08-19 10:10:50

标签: javascript angularjs angularjs-directive

我正在创建一个指令,该指令将从html传递给它的参数并填充模板中的字段。指令的代码如下所示。

(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
        }
    });
}())

directive.html就像

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

主页就像

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

我的问题是为什么你好不显示?

链接到plunker是here

1 个答案:

答案 0 :(得分:2)

您的模块声明错误,您使用的是{}而不是[]。如果你还想在另一个模块中声明该指令,那么你需要将依赖项添加到indexApp(我在这个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
        }
    });
}())