AngularJS设置文本样式小程序

做了一个这样的程序通过选择框选择样式，下面的段落样式跟着改变。就是想做这么一个东西。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         select{margin-right:20px;}
 8     </style>
 9     <script type="text/javascript" src="js/angularjs/1.2.26/angular.js"></script>
10     <script type="text/javascript" src="js/jquery.min.js"></script>
11 </head>
12 <body>
13 <div ng-app="myApp" ng-controller="ColorController">
14     <select ng-model="selectedcolor" ng-options="m.name for m in modelcolor">
15         <option value="">-- 请选择颜色 --</option>
16     </select>
17     <select ng-model="selectedfont" ng-options="m.name for m in modelfont">
18         <option value="">-- 请选择字体 --</option>
19     </select>
20     <button directive>文本</button>
21     <p style="{{selectedfont.value}};{{selectedcolor.value}};width:300px;height:200px;border:1px solid deeppink;" doubleedittext>
22         大道之行也，天下为公，选贤与能，讲信修睦。故人不独亲其亲，不独子其子，使老有所终，壮有所用，幼有所长，鳏、寡、孤、独、废疾者皆有所养，男有分，女有归。货恶其弃于地也，不必藏于己；力恶其不出于身也，不必为己。
23     </p>
24 </div>
25
26 </body>
27 </html>
28 <script type="text/javascript">
29     var myAppModule = angular.module(‘myApp‘, []);
30     myAppModule.controller(‘ColorController‘, [‘$scope‘,function($scope){
31         $scope.selectedcolor= ‘‘;
32         $scope.modelcolor = [
33             {name:‘蓝色‘, value:‘color:blue‘},
34             {name:‘粉色‘, value:‘color:pink‘},
35             {name:‘绿色‘, value:‘color:green‘},
36             {name:‘灰色‘, value:‘color:gray‘}
37         ];
38         $scope.selectedfont= ‘‘;
39         $scope.modelfont = [
40             {name:‘微软雅黑‘, value:‘font-family:"Microsoft YaHei"‘},
41             {name:‘楷体‘, value:‘font-family:"楷体"‘},
42             {name:‘黑体‘, value:‘font-family:"黑体"‘},
43             {name:‘Trebuchet MS‘, value:‘font-family:Trebuchet MS‘}
44         ];
45     }]);
46     myAppModule.directive(‘directive‘, function(){
47         return {
48             restrict: ‘A‘,
49             link: function(scope, elem, attrs){
50             $(elem).click(function(){
51                 $(‘p‘).append("我是文本...");
52             });
53             }
54         }
55     });
56     myAppModule.directive(‘doubleedittext‘, function(){
57         return {
58             restrict: ‘A‘,
59             link: function(scope, elem, attrs){
60                 $(elem).dblclick(function(){
61                     $(‘p‘).append("");
62                 });
63             }
64         }
65     });
66 </script>

效果截图：