如何从角的静态指令模板中访问孤立作用域属性？

Question

主计长：

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

模板：

<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>

指令：

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

问题是，一旦模板被呈现，我就看不到附加到input的值--它是空的，但是我希望它能工作，因为在link函数中它是正确打印的。

Answer 1

您正在尝试将模板中的指令作用域作为控制器的作用域访问。将标记移动到指令的模板中。

指令：

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>'
};

模板：

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

您还可以使用单独的html文件作为指令模板，这是很好的实践。

Answer 2

您是否试图查看控制器中的值？

请尝试$parent.$scope来查看值是否存在。