首先,非常感谢Alice提供代码!!

<body ng-app="myApp" ng-controller="YiMing">
姓名: <input type="text" ng-model="name"/> <br/>
    <first/>
    <second/>
<script>
angular.module('myApp', []).directive('first', [ function(){
    return {
        restrict: 'AE', 
        template: 'first name:{{name}}'
    };
}]).directive('second', [ function(){
    return {
        scope: {}, // 创建指令自己的独立作用域，与父级毫无关系
        controller: function($scope) {
          $scope.name="YiMing"
        },
        restrict: 'AE', 
        template: 'second name:{{name}}'
    };
}]).controller('YiMing', ['$scope', function($scope){
    $scope.name="YiMing";
}]);
</script>
</body>

尝试一下 »

1. 当同时调用first和second时,只有first生效,两个template不会同时出现。

2. 当设置了 scope:{} 之后,{{name}}获取不到了,原因就是作用域的问题,想要设置这里的name的值,可以再加一个controller的字段。

templateUrl 除了接受 String,可以接受 function(elem,attr){}。

测试实例:

customer-address.html 文件代码：

Address: {{customer.address}}

customer-name.html 文件代码：

Name: {{customer.name}}

以下测试代码需要与 customer-address.html 和 customer-name.html 文件在同一个目录下：

angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    templateUrl: function(elem, attr) {
      return 'customer-' + attr.type + '.html';
    }
  };
});

尝试一下 »

有时候绑定 ngModel 到一个 getter/setter 函数时很有用的。getter 是一种能返回一个模型表示的无参函数，setter 是只有一个参数的用于设置模型内部状态的函数。 它对于模型内部与视图显示时所用的数据形式不一致时非常有用。

要使用它，你需要添加 ng-model-options="{ getterSetter: true }" 到一个有 ng-model 元素上。你也可以添加 ng-model-options="{ getterSetter: true }" 到 <form> 上，使的表单中的所有 <input> 都生效。参见 ngModelOptions 获取更多信息。

下面的例子演示如何通过 getter/setter 使用 ngModel ：

<div ng-controller="ExampleController">
  <form name="userForm">
    <label>
      Name:
      <input type="text" name="userName"
             ng-model="user.name"
             ng-model-options="{ getterSetter: true }" />
    </label>
  </form>
<p>user.name = <span ng-bind="user.name()"></span></p>
</div>

尝试一下 »

奕溟的代码同时调用 first 和 second 两个指令时只有 first 指令生效是因为使用的是单标签，只要把 fist 和 second 都改成双标签即可。如下：

<body ng-app="myApp" ng-controller="YiMing">
姓名: <input type="text" ng-model="name"/> <br/>
     <first></first>
    <second></second>
<script>
angular.module('myApp', []).directive('first', [ function(){
    return {
        restrict: 'AE', 
        template: 'first name:{{name}}'
    };
}]).directive('second', [ function(){
    return {
        scope: {}, // 创建指令自己的独立作用域，与父级毫无关系
        controller: function($scope) {
          $scope.name="YiMing"
        },
        restrict: 'AE', 
        template: 'second name:{{name}}'
    };
}]).controller('YiMing', ['$scope', function($scope){
    $scope.name="YiMing";
}]);
</script>
</body>

尝试一下 »