在下面的程序中，函数应该如下所示 -> Controller 、指令 Controller 、编译、链接。但是，Compile函数似乎存在一些错误。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<people></people>
<script>
//1 module declaration
var app = angular.module("myApp",[]);
//3 controller declaration
app.controller('myCtrl',function($scope){
//before going to directive
$scope.name = "One";
});
//5 directives declaration
app.directive('people',function(){
return{
restrict: 'E',
template: '<div>{{name}}</div>',
//before compilation
controller: function($scope, $element){
$scope.name = $scope.name + "Two";
},
compile: function($scope, $element){
$scope.name = $scope.name + "Three";
},
//after compilation
link: function($scope, el, attr){
$scope.name = $scope.name + "Four"
}
}
});
</script>
</body>
</html>
期望:
OneTwoThreeFour
结果
OneTwo
However, if I remove the compile function from directive, I get following result:
OneTwoFour
编译函数有什么问题，它没有在 $scope.name 中渲染“三”？
最佳答案
摘自Angular documentation的片段:
仅当编译属性未定义时才使用链接属性。要在编译前和编译后执行某些操作，请在编译函数中返回以下内容:
function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
}
如果不使用 preLink 或 postLink，$scope 变量在编译函数中不可用。
function compile(tElement, tAttrs, transclude) { ... }
tElement - 模板元素 - 已声明指令的元素。仅对元素和子元素进行模板转换是安全的。
tAttrs - 模板属性 - 在此元素上声明的属性的规范化列表，在所有指令编译函数之间共享。
嵌入 - [已弃用!]嵌入链接函数:function(scope,cloneLinkingFn)
下面是一个演示示例:https://plnkr.co/edit/CCnLFJX8D7sbKobuF1GS?p=preview
关于javascript - Controller 、指令- Controller 、编译、链接 - 工作流程(编译功能不起作用)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36908088/