如何从Angular中的静态指令模板访问隔离的范围属性？

Question

Controller:

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.temp = {
        'name': 'Test'
    };
}]);

Template:

<custom-field ng-model="temp.name">
    <md-input-container class="addon-menu">
        <label>Name</label>
        <input ng-model="ngModel" type="text" ng-focus="setLastFocusedElement($event)" />
    </md-input-container>
</custom-field>

Directive:

app.directive('customField', function($timeout) {
   return {
       restrict: 'E',
       scope: {
           ngModel: '='
       },
       link: function($scope, $element, $attrs) {
           console.log($scope.ngModel); // prints "test"
       }
   };
});

The problem is that once template is rendered, I can't see the value attached to input - it's empty, but I'm expecting to works, because inside link function it's printed correctly.

Answer 1

You are trying to access the directive scope in your template as the controller's scope. Move the markup inside the directive's template instead.

Directive:

app.directive('customField', function($timeout) {
return {
   restrict: 'E',
   scope: {
       ngModel: '='
   },
   link: function($scope, $element, $attrs) {
       console.log($scope.ngModel); // prints "test"
   },
   template: '<md-input-container class="addon-menu"><label>Name</label><input ng-model="ngModel" type="text" ng-focus="setLastFocusedElement($event)" /></md-input-container>'
};

Template:

<custom-field ng-model="temp.name"></custom-field>

You can also use separate html files as directive templates, which is good practise.

Answer 2

Are you trying to see the value in controller?

Please try $parent.$scope to see if value exist.