Question

我在父和子关系中有两个指令，每个指令都有link个实现。 parent设置scope变体 - name，将其作为属性传递给child。

链接执行的顺序是 - 首先是child链接，然后是parent链接。

在parent链接完成执行后，它会向其子级广播，但似乎孩子尚未进行此scope更改。

这里的例子 -

＆＃13;

var myAppModule = angular.module('myAppModule', []).
		directive('parent',function($parse){
			return {
				restrict: 'E', 
				link: function(scope) {
					scope.name = "Dan";
					console.log("parent: My name is "+scope.name);
					scope.$broadcast("ready");
				}
			}
		})
		.directive('child',function($parse){
			return {
				restrict: 'E',
				scope: {
					name: '='
				},
				link: function(scope) {
					scope.$on("ready",function () {
						console.log("child: My name is "+scope.name);
					})
				}
			}
		});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<parent>
		<child name="name">
		</child>
	</parent>

＆＃13;

它记录 -

 parent: My name is Dan
 child: My name is undefined

为什么child没有考虑name后broadcast的变化？这是因为$digest还没有为此Angular转弯打电话吗？

Answer 1

首先，除非您使用翻译，否则您不能将<child>指令添加到<parent>之内。

然后，不建议处理从父母到孩子讨论的事件（$broadcast和$on），而是可以有共享服务，或者在这种情况下更容易看到{ {1}}绑定待解决。

了解它在此代码段中的工作原理：

＆＃13;

name

＆＃13;

var myAppModule = angular.module('myAppModule', []).
		directive('parent',function($parse){
			return {
				restrict: 'E', 
                template: '<div>Parent: {{name}}<div ng-transclude></div></div>',
                transclude: true,
				link: function(scope) {
					scope.name = "Dan";
					console.log("parent: My name is "+scope.name);
				}
			}
		})
		.directive('child',function($parse){
			return {
				restrict: 'E',
				scope: {
					name: '='
				},
                template: '<div>Child: {{name}}</div>',
				link: function(scope) {
					scope.$watch('name', function() {
                        console.log("child: My name is "+scope.name);
                    });
				}
			}
		});

＆＃13;

父和子关系指令之间的绑定

1 个答案: