Gerfried Gerfried - 11 months ago 40
AngularJS Question

$scope elements not visible outside of directive (using $scope:false)

I have a simple directive which uses the parent scope. However I cannot access the scope of the directive. What am I doing wrong?

<p>myFrm2.$name: {{myFrm2.$name}}</p>

<form name="myFrm2" id="myFrm2">
<input type="text" ng-model="fld2">

This is the directive:

.directive('pane', function() {
return {
restrict: 'E',
transclude: true,
scope: false,
template: '<div style="border: 1px solid black;">' +
'<div style="background-color: gray; color:white">Test Directive</div>' +
'<ng-transclude></ng-transclude>' +

As I am setting $scope:false in my directive, I would suppose that the scope is shared between the directive and its parent scope.


Issue disappears when you use object models or controllerAs alias.

Example with object

in controller

  $scope.forms ={};

In view

<p>myFrm2.$name: {{forms.myFrm2.$name}}</p>

  <form name="forms.myFrm2" id="myFrm2">
    <input type="text" ng-model="fld2">

Note that you should always use object in ng-model also