Question

这就是我的应用程序的结构。

<controller>

  <directive>

     transcluded html 

  </directive>

</controller>

我有一个名为＆＃34的范围变量; defaultShipTo＆＃34;在控制器中启动。我试图在该控制器内的指令的transcluded html中访问此范围变量。根据转换范围的规则，转换范围基本上是指令父级的副本（即本例中的控制器）。

我试图在指令内发生绑定和转换后操纵被转换的html。为此，我在指令中使用后链接功能。

指令代码 -

(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>

我不应该得到＆＃34;后绑定＆＃34;在post-link中，defaultShipTo的值是什么？

注意：绑定最终会发生并且值已填充，但我不确定为什么在后链接时它还没有发生。

Answer 1

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

＆＃13;

(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])
		  }
		}
	  },

	};
  }
})();

＆＃13;

<!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>

＆＃13;

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

1 个答案: