如何在嵌套AngularJS指令中访问被嵌入的子作用域

Hey there! Let's break down how to access that nested child scope in your agreementDialog directive. Here are a few solid, maintainable approaches tailored to AngularJS's scope behavior:

If your myapp-dialog-window-modal uses an isolated scope (which is best practice for reusable directives), you can explicitly bind data between parent and child scopes via attributes.

First, update your agreementDialog template to pass a bindable variable to the nested directive:

<div>
  <myapp-dialog-window-modal 
    window-title="Agreements" 
    dialog-visible="agreementDialogVisible"
    accept-status="agreementAccepted"> <!-- Add this binding -->
    <p>You need to accept the new terms.</p>
    <p><label><input type="checkbox" ng-model="acceptStatus"></label> I accept the terms</p>
  </myapp-dialog-window-modal>
</div>

Then, ensure myapp-dialog-window-modal defines this binding in its isolated scope:

angular.module('myapp.common').directive('myappDialogWindowModal', function () {
  return {
    restrict: 'E',
    scope: {
      windowTitle: '@',
      dialogVisible: '=',
      acceptStatus: '=' // Two-way binding for the acceptance state
    },
    transclude: true,
    template: '<div ng-show="dialogVisible"><h3>{{windowTitle}}</h3><div ng-transclude></div></div>'
  };
});

Now, the agreementAccepted variable in your agreementDialog's scope will stay in sync with the checkbox state—no messy scope traversal needed.

The controller as pattern eliminates ambiguity around nested scopes by attaching your data to a controller instance instead of relying on scope inheritance.

Update your agreementDialog directive like this:

angular.module('myapp.common.extra').directive('agreementDialog', function () {
  return {
    restrict: 'E',
    replace: true,
    controllerAs: 'dialogVm',
    controller: function () {
      var vm = this;
      vm.agreementDialogVisible = false;
      vm.agreementAccepted = false;
    },
    template: '<div><myapp-dialog-window-modal window-title="Agreements" dialog-visible="dialogVm.agreementDialogVisible">' +
      '<p>You need to accept the new terms.</p>' +
      '<p><label><input type="checkbox" ng-model="dialogVm.agreementAccepted"></label> I accept</p>' +
      '</myapp-dialog-window-modal></div>'
  };
});

With this setup, you can reference dialogVm.agreementAccepted directly in the transcluded content—regardless of how many nested scopes exist between the directive and the checkbox.

If you need a temporary workaround and know the exact scope hierarchy, you can use $parent to traverse up to the parent scope. For example:

<input type="checkbox" ng-model="$parent.agreementAccepted">

⚠️ Caveat: This is fragile—if the scope structure of myapp-dialog-window-modal changes (e.g., it adds another nested scope), you’ll need to adjust to $parent.$parent, which makes your code hard to maintain. Only use this for quick tests, not production code.

Remember: When a directive uses transclude: true, Angular creates a new scope that inherits from the directive’s parent scope (not the directive’s own scope). So if your myapp-dialog-window-modal uses transclusion, the checkbox’s scope is tied to the parent of agreementDialog, not agreementDialog itself. The first two approaches above avoid this confusion entirely.

内容的提问来源于stack exchange，提问作者Tom Söderlund