Find my Plunkr example here: http://plnkr.co/edit/9LcYbn1468miu5McgPqR?p=preview
I successfully added the form to the variable inside the options parameter, but I am looking to bind it to a different location outside of the options parameter.
I have a custom panel directive that generates a panel. Within the panel options, I can specify a directive for the panel to dynamically invoke:
(function (ng, app)
{
"use strict";
app.directive(
"panel",
function ($compile)
{
return {
scope: {
options: '=',
},
link: function(scope, element, attrs)
{
el = angular.element('<' + scope.options.Directive + ' options=\'' + JSON.stringify(scope.options.DirectiveOptions) + '\' ' + additionalOptionsString + '></>');
element.find(".panel-body").append(el);
$compile(el)(scope);
},
templateUrl: function (elem, attr)
{
return '/Panel.html';
},
}
});
})(angular, app);
The functionality works well and the directive is dynamically instantiated as desired. However, I have another directive within another panel, and inside that is yet another directive. Both directives have isolated scopes. The structure is as follows:
Panel
Directive
Panel
OtherDirective
I aim to pass an additional parameter option to the "Other Directive" so that the data in "Other Directive" is accessible to "Directive." Currently, the options are being hardcoded in the json format by the panel, which is not ideal. The additional scope variable ends up like this:
<OtherDirective options='{"hardCodedJson": "Value"} ' scopeVariableToBind='VariableInDirective'></OtherDirective>
However, the variable 'VariableInDirective' is not being bound by OtherDirective. Below is the code for these two directives:
(function (ng, app)
{
"use strict";
app.directive(
"directive",
function ()
{
return {
scope: {
options: '=',
},
controller: function ($scope)
{
$scope.Comment;
$scope.OtherDirectiveOptions=
{
showcreatebutton: false,
};
$scope.OtherDirectivePanelOptions = {
Id: $scope.options.Id,
Title: $scope.options.Title + " Comment",
Directive: "otherdirective",
DirectiveOptions: $scope.OtherDirectiveOptions,
test: true,
AdditionalOptions: { "scopevariabletobindto": "VariableInThisScope" }
}
$scope.test = function ()
{
debugger;
}
},
templateUrl: function (elem, attr)
{
return '/Directive.html';
},
}
});
})(angular, App);
Other Directive has a form that I want to bind to a scope variable from the above directive. I need to chain the variables going up the nested controls in order to access them hierarchically. Here is the code for Other Directive:
(function (ng, app)
{
"use strict";
app.directive(
"otherdirective",
function ($compile)
{
return {
scope: {
options: '=',
scopevariabletobindto: '=',
},
controller: function ($scope, $element)
{
$scope.id = $element.parent()[0].id;
$scope.form = {};
templateUrl: function (elem, attr)
{
return '/OtherDirective.html';
},
}
});
})(angular, app);
Despite my efforts, I am unable to bind the form to the scope variable passed in as 'scopevariabletobindto.' Any insights on why this binding is not functioning?
Edit:
I have discovered that passing the form property as a function using the & symbol resolves the issue.