发表于： 2018-07-02 21:16:01
1 324
今天完成的事情：优化代码，学习自定义指令，完成任务九深度思考
明天计划的事情：完成任务10深度思考，
遇到的问题：
问题描述：控制器内使用了自定义服务，自定义服务中使用自定义过滤器，报错$filter is not a function
问题出现原因：注入依赖时应该三个地方注入$filter，自定义服务的函数中，控制器的函数中，控制器调用服务的地方，而我忘记在第三处注入依赖。
1.自定义服务的函数（红色字体为变更处）
App.factory('providerGetArticleDetail', function() {2.控制器的函数中（红色字体为变更处）
return function($scope,$http,myConstant,$filter) {
$http({
method: myConstant.urlPort.articleGetSingle.method ,
url: $scope.urlArticleGetSingle,
}).then(function successCallback(response) {
console.log("$http请求成功");
console.log(response);
$scope.titleText=response.data.data.article.title;//填写标题文本
$scope.typeNum=response.data.data.article.type;//状态类型对应号码
$scope.industryNum=response.data.data.article.industry;//行业大图对应号码
$scope.typesDetail=myConstant.typesDetail;
$scope.typesDetail = JSON.parse(angular.toJson($scope.typesDetail));
$scope.selectedType=$filter('filterTypeObj')($scope,myConstant);//更改类型选项
$scope.selectedIndustry=$filter('filterIndustryObj')($scope,myConstant);//更改行业大图对应行业
$scope.explainText=response.data.data.article.content;//富文本编辑器文本
if(!$scope.explainText){
}else {
$scope.editor1.txt.clear();//清空内容
console.log( $scope.explainText);
$scope.editor1.txt.html( $scope.explainText);//载入内容
}
$scope.urlText=response.data.data.article.url;
$scope.imgUrl=response.data.data.article.img;
$scope.dataEditObj=response.data.data.article;//取出用于发起put请求编辑页面的data对象
}, function errorCallback(response) {
// 请求失败执行代码
alert("请求失败执行代码")
});
};
});//发起get请求，更改编辑页面数据
App.controller("articleDetail",function ($scope,$rootScope,$http,$location,3.控制器调用服务的地方
providerGetArticleDetail,
providerAddArticle,
providerUploadFile,
providerEditArticle,
providerWangEditorConfig,
$filter,
myConstant) {
if(!!$rootScope.idEdit){解决办法：控制器调用服务的地方注入过滤器
$scope.urlArticleGetSingle=myConstant.urlPort.articleGetSingle.url+$rootScope.idEdit;//填写get编辑页面数据url
$scope.statusMsg="成功";//表单验证条件，使其不更改图片也可以操作
providerGetArticleDetail($scope,$http,myConstant,$filter);//发起请求，更改编辑页面数据
}//判断是否是编辑页面
收获：
#一、指令的编译过程及命名方式
1.浏览器得到 HTML 字符串内容，解析得到 DOM 结构。
2.ng 引入，把 DOM 结构扔给 $compile 函数处理：
①- 找出 DOM 结构中有变量占位符
②- 匹配找出 DOM 中包含的所有指令引用
③- 把指令关联到 DOM
④- 关联到 DOM 的多个指令按权重排列
⑤- 执行指令中的 compile 函数（改变 DOM 结构，返回 link 函数）
⑥- 得到的所有 link 函数组成一个列表作为 $compile 函数的返回
3. 执行 link 函数（连接模板的 scope）。
这里注意区别一下$compile和compile，前者是ng内部的编译服务，后者是指令中的编译函数，两者发挥作用的范围不同。compile和link函数息息相关又有所区别，这个在后面会讲。了解执行流程对后面的理解会有帮助。
在这里我有些人可能会问，angular不就是一个js框架吗，怎么还能跟编译扯上呢，又不是像C++那样的高级语言。其实此编译非彼编译，ng编译的工作是解析指令啦，绑定监听器啦，替换模板中的变量啦这些。因为工作方式很像高级语言编辑中的递归、堆栈过程，所以起名为编译，不要疑惑。
指令的几种使用方式如下：
作为标签：<my-dir></my-dir>
作为属性：<span my-dir="exp"></span>
作为注释：<!-- directive: my-dir exp -->
作为类名：<span class="my-dir: exp;"></span>
其实常用的就是作为标签和属性，下面两种用法目前还没见过，姑且留个印象。我们自定义的指令就是要支持这样的用法。
关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时像这样：<my-directive>。
#二、自定义指令的配置参数
```
myModule.directive('namespaceDirectiveName', function factory(injectables) {
var directiveDefinitionObject = {
restrict: string,//指令的使用方式，包括标签，属性，类，注释
priority: number,//指令执行的优先级
template: string,//指令使用的模板，用HTML字符串的形式表示
templateUrl: string,//从指定的url地址加载模板
replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上
transclude: bool,//是否将当前元素的内容转移到模板中
scope: bool or object,//指定指令的作用域
controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数
require: string,//指定需要依赖的其他指令
link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等
compile: function compile(tElement, tAttrs, transclude){
return: {
pre: function preLink(scope, iElement, iAttrs, controller){...},
post: function postLink(scope, iElement, iAttrs, controller){...}
}
}//编程的方式修改DOM模板的副本，可以返回链接函数
};
return directiveDefinitionObject;
});
```
任务进度：js-6
任务开始时间：2018.6.07
禅道：http://task.ptteng.com/zentao/project-task-692.html
返回列表
评论