如何從Angular中的靜態指令模板訪問隔離的范圍屬性？

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