在我的项目中,我想访问 Controller 的 $scope,但是,因为我的范围在一个指令中,所以使用了指令的 $scope。
这是一个完美的例子。 http://codepen.io/anon/pen/zrmeZw?editors=1010
如果我替换 <card-panel>
带有 <div>
的标签, 一切都好。但是有了 <card-panel>
标签,如果是卡片面板范围而不是我的 Controller $scope,则使用 $scope。
JavaScript
app = angular.module('BlankApp', ['ngMaterial']);
app.directive('cardPanel', function () {
return {
transclude: true,
template: '<div style="background:#fff" layout-margin layout-padding><div ng-transclude></div></div>',
restrict: 'E',
link: function (scope, element, attrs) {
}
};
});
app.controller('MyController', function($scope) {
$scope.myContent = '';
$scope.onChangeListener = function() {
console.log($scope.myContent);
console.log("toto");
}
});
html
<body ng-app="BlankApp" ng-cloak style="background:#f1f1f1" layout>
<div ng-controller="MyController">
<card-panel layout-margin>
<h1>MyDemo</h1>
<md-input-container class="md-block">
<label> demo </label>
<input ng-change="onChangeListener()" ng-model="myContent"> </input>
</md-input-contanier>
</card-panelr>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</body>
</html>
好的,我可以吗?
谢谢
最佳答案
我试图通过使用 Controller 作为语法来解决这个问题。使用 controllerAs 语法,范围不会混淆。
这是工作 code
<div ng-controller="MyController as myctrl">
<card-panel layout-margin>
<h1>MyDemo</h1>
<md-input-container class="md-block">
<label> demo </label>
<input ng-change="myctrl.onChangeListener()" ng-model="myctrl.myContent"/>
</md-input-contanier>
</card-panelr>
</div>
</div>
app.controller('MyController', function($scope) {
var vm = this;
vm.myContent = '';
vm.onChangeListener = function() {
console.log(vm.myContent);
console.log("toto");
}
});
关于javascript - 使用指令的范围而不是 Controller 的范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35255604/