<!DOCTYPE html> <html data-ng-app="app"> <head> <title>angular js</title> <meta charset="utf-8"> <script src="angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app",[],function(){ console.log("init"); }); app.directive("myDiv",function(){ return { restrict: "E", scope: { myTitle: "=myTitle" }, template: "<input type='text' data-ng-model='myTitle' /><h1>{{myTitle}}</h1>" //,replace: true 如果设置为true,template的内容要有个根容器<div><input type='text' data-ng-model='myTitle' /><h1>{{myTitle}}</h1></div> } }); var controller = app.controller("myController",function($scope){ $scope.ctrlTitle = ""; }); </script> </head> <body data-ng-controller="myController"> <input type="text" data-ng-model="ctrlTitle" /><br/> <my-div my-title="ctrlTitle"></my-div> <script type="angular/template" id="template1"> <h1>模板内容</h1> </script> </body> </html>