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来查看是否存在值。

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

2 个答案: