发表于： 2017-05-10 23:29:17
2 1017
今天做了啥/收获：
又改了很多bug；
新的认识：
angularjs的$compile用法
ngularjs里比较重要但又很少手动调用的要属$compile服务了，通常在写组件或指令时，都是angularjs自动编译完成的，但有时我们可能需要手动编译，比如封装一个table组件，根据参数实现自定义渲染，增加一列复选框或者一列按钮啥的，这是就需要用到$compile了。
例子：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angular</title>
<script src="libs/jquery.js"></script>
<script src="libs/angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', function ($scope, $compile) {
var vm = this;
vm.msg = 'hello';
// 创建编译函数
var compileFn = $compile('<div>{{appCtrl.msg}}</div>');
// 传入scope，得到编译好的dom对象(已封装为jqlite对象)
// 也可以用$scope.$new()创建继承的作用域
var $dom = compileFn($scope);
// 添加到文档中
$dom.appendTo('body');
})
</script>
</head>
<body ng-controller="MyController as appCtrl">
</body>
</html>
通过$compile服务可以编译html字符串或dom对象或jqLite对象，然后得到一个编译函数，再传入$scope，就会在当前作用域进行编译，返回编译好的jqLite对象，这时就可以直接添加到文档中了（也可以先添加到文档再编译）。
编译的实质其实就是对dom对象解析，使dom对象与scope进行耦合，通过绑定可以实现数据的更新，像Vue其实也是一样的过程。
封装为指令
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angular</title>
<link rel="stylesheet" href="libs/bootstrap.css">
<script src="libs/jquery.js"></script>
<script src="libs/angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', function ($scope, $compile, $timeout) {
var vm = this;
vm.html = '<h1>{{title}}</h1>\
<ul>\
<li ng-repeat="item in items">{{item}}</li>\
</ul>'
})
.directive('compile', function($compile) {
return {
scope: {
compile: '='
},
link: function(scope, elem, attrs) {
scope.title = 'list';
scope.items = ['list1', 'list2', 'list3'];
elem.html($compile(scope.compile)(scope))
}
}
})
</script>
</head>
<body ng-controller="MyController as appCtrl">
<div compile="appCtrl.html"></div>
</body>
</html>
明天做啥：请假回去考试 得好几天。。。
问题：代码来回出了些问题：自己想了想 还是没深入的锅！
还又自定义指令。要在任务里强行用嘛？我没发现特别需要用的地方
返回列表
评论