如何使用angularjs访问包含文件中定义的变量？

Question

I have a form like this:

my_file.html:

<form name='first_form'>
  ...
</form>
<div ng-include="'/includes/second_form.html'"></div>

<a ng-click="myLog(first_form);myLog(second_form);">Submit</a>

/includes/second_form.html :

<form name='second_form'>
  ...
</form>

In can pass first_form to my controller, but not second_form . (myLog does a console.log).

How can I access the form in the included file ? Is there a better way to have access to the forms in angular ?

Answer 1

The principle is this:

Wrap my_file.html in a directive and include the second form as a directive too, eg as:

<div outer-directive>
    ...
    <div inner-directive></div>
    ...
</div>

The outerDirective must define a controller with a member method, eg setInnerForm(form) , that will store its form argument in the scope. The inner directive will require the parent controller and call this method as:

app.directive("innerDirective", function() {
    return {
        ...
        templateUrl: "/includes/second_form.html",
        require: "^outerDirective",
        link: function(scope, elem, attrs, outerController) {
            outerController.setInnerForm(scope.second_form);
        },
        ...
    };
}

A working demo of the principle is here: http://jsfiddle.net/ABK5y/