AngularJs指令问题

时间:2014-03-03 01:46:37

标签: javascript angularjs angularjs-directive

我创建了两个指令并将它们包含在我的html中。但是,只有第一个执行,后面没有任何内容。

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div directive-one=""/> 
        <div directive-two=""/>
        <div> Hello I am {{name}} and I am {{age}} years old!</div>
    </div>

    <script type="text/ng-template" id="myTemplate.html">
        <div>Name: <input type='text' ng-model='name'/></div>
    </script>
</div>

使用Javascript:

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

app.controller('MyCtrl', function ($scope) {
    $scope.name = "Jason";
    $scope.age = "20";
});

app.directive('directiveOne', function () {
    return {
        replace: true,
        template: "<div>Age: <input type = 'text' id = 'age' ng-model='age'>
                  </input></div>"
    }
});

app.directive('directiveTwo', function () {
    return {
        replace: true,
        templateUrl: "myTemplate.html"
    }

});

这是小提琴:DEMO

无法弄清问题是什么。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:2)

您必须使用其中的指令关闭div标签,并且在任何一个之后都不需要=“”。

<div directive-one></div> 
<div directive-two></div>

Here's an updated fiddle with it working.