AngularJS - adding new values to directive's isolated scope -

AngularJS - adding new values to directive's isolated scope -

i have directive isolated scope following:

application.directive("mydirective",function(){ homecoming { restrict: "a", scope: {mydirective:"="}, link : function(scope) { console.log("my directive: ",scope.mydirective) // works fine scope.person={name:"john",surname:"doe"} scope.hello=function(){ console.log("hello world!") } } } })

corresponding view:

<div my-directive='{testvalue:3}'> testvalue: {{mydirective}}<br/> hello {{person}} <button ng-click="hello()">say hello</button> </div>

and seems cannot utilize of fields declared in scope. in view "mydirecive" , "person" fields blank , scope's "hello" function not executed when press button.

it works fine when pass scope="true" directive not work in isolated scope.

am missing here or maybe there no way introduce variables isolated scope of directive?

update

updated question presenting why rather not utilize static template. effect trying accomplish create directive allows upload html form getting form initial info via rest/json. whole process rather complex , application specific hence cannot utilize available form libraries. nowadays below simplified version of utilize case:

the updated directive

application.directive("myform",function(){ homecoming { restrict: "a", scope: {myform:"="}, link : function(scope) { console.log("form parameters: ",scope.myform) // works fine scope.formdata=... // form initial info json server scope.submitform=function(){ // send scope.formdata via rest server } } } })

the case when utilize form. of course of study utilize directive many times different forms.

<form my-form='{posturl:'/myposturl',getformdataurl:'/url/to/some/json}'> <div>form user: {{formdata.username}} {{formdata.usersurname}} <input type="text" ng-model="formdata.userage" /> <input type="text" ng-model="formdata.useremail" /> <button ng-click="submitform()">submit</button> </form>

i hope explains why cannot utilize 1 static html template scenario.

maybe can explain why working scope="true" , isolated scope cannot access scoped variables?

with angular, directives either work template (or templateurl) or transcluded content.

if you're using template, template has access isolate scope. so, if set {{person}} in template work expected.

if you're using transcluded content - is, content kid of node has directive applied - then, not need set transclude: true , specify in template transcluded content goes - e.g. <div ng-transclude></div> see content, not results expect, since transcluded content has access same scope variables parent of directive, , not available in isolate scope of directive.

also, should aware if pass non-assignable object directive's isolate scope "=" - did my-directive="{testvalue: 3", can't create changes (and, unfortunately, properties if scope variables).

so, create specific case work, this:

application.directive("mydirective",function(){ homecoming { ... template: "testvalue: {{mydirective}}<br/> " + "hello {{person}} " + "<button ng-click="hello()">say hello</button>"; }; });

and corresponding view:

where prop set in view controller to: $scope.prop = {testvalue: 3};

angularjs