javascript - Sharing scope variables between two dynamically instantiated directives -

plunkr: http://plnkr.co/edit/9lcybn1468miu5mcgpqr?p=preview

i can add form variable inside passed in options parameter, i'd bind other inside options parameter.

i have panel directive create panel. part of options of panel, can specify directive panel should 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); 

this works great, , dynamically instantiates directive want without little worry. now, have directive consists of panel, , inside directive. both have isolated scopes. have:

panel    directive       panel          otherdirective 

i want pass additional parameters option "other directive" data in "other directive" accessible "directive." options, can see above panel code, being turned json , being "hard coded" panel @ moment. additional scope variable string, , turns out like:

<otherdirective options='{"hardcodedjson": "value"} ' scopevariabletobind='variableindirective'></otherdirective>  

yet, variable 'variableindirective' not being bound otherdirective. here code 2 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, //this gets serialized panel , "hard coded"                             test: true,                             additionaloptions: { "scopevariabletobindto": "variableinthisscope" }                         }                          $scope.test = function ()                         { //function used see if variable in scope set                             debugger;                         }                     },                     templateurl: function (elem, attr)                     {                         return '/directive.html';                     },                 }             });     })(angular, app); 

other directive, has form, want bind scope above's variable. want able chain variables going nested controls, can access them hierarchically:

   (function (ng, app)     {          "use strict";          app.directive(             "otherdirective",              function ($compile)             {                 return {                     scope: {                         options: '=', //have tried scopevariabletobindto: '=form': no luck, have tried lot of different combinations.                         scopevariabletobindto: '=',                     },                      controller: function ($scope, $element)                     {                          $scope.id = $element.parent()[0].id; //i want form in directive bind scopevariabletobindto.                         $scope.form = {};                        //have tried set manually $scope.scopevariabletobindto = { "test" : "test"} no luck                      templateurl: function (elem, attr)                     {                         return '/otherdirective.html';                     },                 }             });     })(angular, app); 

i want bind form scope variable passed in 'scopevariabletobindto', can't seem bind @ all. ideas why?

edit:

it seems can pass form property function , works uing & symbol.

your problem naming conventions of angular. attributes have use kebap-case every word concatenated via hypen, these translated in terms of scope camelcase representation. therefore, should convert attribute name camel kebap before writing html tag.

for example shouldn't do:

# html <div scopevariabletobedefined=".."></div>  # js ...  scope: {    scopevariabletobedefined: "=" } 

instead do:

# html <div scope-variable-to-be-defined=".."></div>  # js ...  scope: {    scopevariabletobedefined: "=" }