angularjs - 我可以将范围变量传递到指令的链接函数中，但不能传递到编译函数中， Angular

Question

我正在使用 ng-repeat，并且需要将作用域变量传递到指令的编译函数中。我知道如何使用链接函数来完成此操作，但不知道如何使用编译函数。

我的 html 看起来像:

    <div ng-repeat="item in chapter.main">
      <block type="item.type"></block>
    </div>

无论项目是什么，我们都说 item.type="blah"。那么这个链接功能就可以正常工作了

app.directive('block', function() {
  return {
      restrict: 'E',
      link: function(scope, element, attributes){
            scope.$watch(attributes.type, function(value){
                console.log(value); //will output "blah" which is correct
            });

        }
  }
});

但是我不能对编译做同样的事情吗？

app.directive('block', function() {
  return {
      restrict: 'E',
      compile: function(element, attrs, scope) {
        scope.$watch(attrs.type, function(value){
             console.log(value);
         });
      }
  }
});

我得到的错误是“无法读取未定义的属性 $watch”..

这就是我希望我的指令的样子:

app.directive('block', function() {
  return {
      restrict: 'E',
      compile: function(element, attrs) {
        element.append('<div ng-include="\'{{type}}-template.html\'"></div>');
        //or element.append('<div ng-include="\'{' + attrs.type + '}-template.html\'"></div>');
        //except the above won't interpret attr.type as a variable, just as the literal string 'item.type'
      }
  }
});

Answer 1

compile 函数没有 scope 作为其参数。

函数编译(tElement, tAttrs, transclude) { ... }

注意:最新版本的 Angular 中已弃用 transinclude。

您有什么理由不想使用链接吗？

来自文档

The compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often. The compile function takes the following arguments:

tElement - template element - The element where the directive has been declared. It is safe to do template transformation on the element and child elements only.

tAttrs - template attributes - Normalized list of attributes declared on this element shared between all directive compile functions.

transclude - [DEPRECATED!] A transclude linking function: function(scope, cloneLinkingFn)

更新

要从 compile 函数内部访问作用域，您需要有 preLink 或 postLink 函数。就您而言，您只需要 postLink 函数。所以这...

compile: function compile(tElement, tAttrs, transclude) {
    return function postLink(scope, element, attrs) { ... }
},

建议的解决方案可能不准确，但应该可以帮助您。

html

<div ng-app="myApp" ng-controller="app">
    <block type="item.type"></block>
</div>

JS( Controller +指令)

var myApp = angular.module('myApp', []);

myApp.controller('app', function ($scope, $http) {
    $scope.item = {
        type: 'someTmpl'
    };
}).directive('block', ['$compile', function ($compile) {
    return {
        restrict: 'AE',
        transclude: true,
        scope: {
            type: '='
        },
        compile: function (element, attrs) {
            return function (scope, element, attrs) {
                var tmpl;
                tmpl = scope.type + '-template.html';
                
                console.log(tmpl);
                
                element.append('<div ng-include=' + tmpl + '></div>');

                $compile(element.contents())(scope);
            };
        }
    };
}]);