Angular 指令 - 范围未在帖子链接处绑定答案

【问题标题】：Angular directive - scope not binded at post linkAngular 指令 - 范围未在帖子链接处绑定
【发布时间】：2016-02-10 16:31:27
【问题描述】：

这就是我的应用的结构。

<controller>

  <directive>

     transcluded html 

  </directive>

</controller>

我在控制器中启动了一个名为“defaultShipTo”的范围变量。我正在尝试在此控制器内部的指令的嵌入 html 中访问此范围变量。根据嵌入范围的规则，嵌入范围基本上是指令的父级（即本例中的控制器）的副本。

在绑定和嵌入发生在指令内之后，我试图操纵被嵌入的 html。为此，我在指令中使用 post-link 函数。

指令代码 -

(function(){
'use strict';

angular.module('checkoutApp')
    .directive('wizardCard', [wizardCardDirective]);


function wizardCardDirective(){
    return {
        restrict : 'E',
        replace : false,
        scope : {
           current : '@',
           checkoutStates: '='
        },
        transclude: true,
        templateUrl: 'wizard-card.html',
        compile: function(element, attributes){
            console.log("compile");

             return {
                 pre: function(scope, element, attributes, controller, transcludeFn){

                     console.log("pre");

                 },
                 post: function(scope, element, attributes, controller, transcludeFn){

                    console.log("post");
                     console.log(element.html())
                 }
             }
         },

    };
}

})();

模板代码 - wizarrd-card.html -

<ng-transclude></<ng-transclude>

在 html 中使用的指令 -

<wizard-card current="shipping" checkout-states="checkoutStates">

    {{defaultShipTo}}

</wizard-card>

当我在发布链接期间在控制台上打印出 element.html() 时，我得到以下信息：

<ng-transclude><span class="ng-binding ng-scope">
    {{defaultShipTo}}
</span></ng-transclude>

我是否应该在链接后获得 defaultShipTo 的“后绑定”值？

注意：绑定最终会发生并填充值，但我不确定为什么它在链接后尚未发生。

【问题讨论】：

你应该在 postLink 函数中使用console.log(transcludeFn();，它会给你嵌入的 html。

标签： angularjs angularjs-directive transclusion

【解决方案1】：

我认为@Pankaj-Parkar 是对的，这是可行的解决方案。但是这里有一个问题，为什么不使用 child 指令来修改模板中呈现的 html？

(function() {
  'use strict';

  angular.module('checkoutApp',[])
	.directive('wizardCard', wizardCardDirective)
	.controller('MainCtrl', function($scope) {
	  $scope.defaultShipTo = 'Jon Dan';
	  $scope.checkoutStates = 'inQueue';
	  $scope.shipping = 'shipping Add';
	});

  function wizardCardDirective() {
	return {
	  restrict: 'E',
	  replace: false,
	  scope: {
		current: '@',
		checkoutStates: '='
	  },
	  transclude: true,
	  template: '<ng-transclude></<ng-transclude>',
	  compile: function(element, attributes) {
		console.log("compile");

		return {
		  pre: function(scope, element, attributes, controller, transcludeFn) {

			console.log("pre");

		  },
		  post: function(scope, element, attributes, controller, transcludeFn) {

			console.log("post");
			console.log(element.html())
			console.log(transcludeFn()[0])
		  }
		}
	  },

	};
  }
})();

<!DOCTYPE html>
<html ng-app="checkoutApp">

<head>
  <meta charset="utf-8" />
  <script>
	document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
</head>

<body ng-controller="MainCtrl">
  <wizard-card current="shipping" checkout-states="checkoutStates">
	{{defaultShipTo}}
</wizard-card>
</body>

</html>

【讨论】：