Question

在以下程序中，该功能应如下所示 - ＆gt;控制器，指令控制器，编译，链接。但是，编译功能似乎存在一些错误。

<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

但是，如果我从指令中删除编译函数，我会得到以下结果：
 OneTwoFour

它没有渲染的编译功能有什么问题＆＃39;三＆＃39;在$ scope.name中？

Answer 1

取自Angular documentation的片段：

仅当未定义compile属性时才使用link属性。要在编译前后执行某些操作，请在编译函数中返回以下内容：

function compile(tElement, tAttrs, transclude) {
    return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
    }
}

$ scope变量在不使用preLink或postLink的情况下在编译函数中不可用。

function compile(tElement, tAttrs, transclude) { ... }

tElement - template element - 声明指令的元素。仅对元素和子元素进行模板转换是安全的。
tAttrs - 模板属性 - 在所有指令编译函数之间共享的此元素上声明的规范化属性列表。
transclude - [DEPRECATED！]一个transclude链接函数：function（scope，cloneLinkingFn）

以下是一个示例：https://plnkr.co/edit/CCnLFJX8D7sbKobuF1GS?p=preview

控制器，指令控制器，编译，链接 - 工作流程（编译功能不起作用）

1 个答案: