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