Не могу никак разобраться, как с обычного синтаксиса контроллера через $scope
перейти на синтаксис Controller AS. Задачу упростил для примера.
Есть работающий код в стиле $scope
(Plunker):
HTML
<body ng-controller="MainCtrl">
<div ng-hide="!isLoading">isLoading</div><br>
<my-frame ng-repeat="item in items"></my-frame>
<button ng-click="add('1')">ADD</button>
</body>
JS
var app = angular.module('plunker', []);
app.directive("myFrame", function () {
return {
restrict: "E",
replace: true,
template: "<iframe src='load.html'></iframe>",
transclude: true,
scope: {},
link: function (scope, element, attrs) {
element.on('load', function () {
scope.$apply(function (){
scope.$parent.$parent.isLoading = false;
});
});
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.isLoading = false;
$scope.add = function (value){
$scope.isLoading = true;
$scope.items.push(value);
};
});
пытаюсь его переделать на CONTROLLER AS
HTML
<body ng-controller="MainCtrl as ctrl">
<div ng-hide="!ctrl.isLoading">isLoading</div><br>
<my-frame ng-repeat="item in ctrl.items"></my-frame>
<button ng-click="ctrl.add('1')">ADD</button>
</body>
JS
var app = angular.module('plunker', []);
app.directive("myFrame", function () {
return {
restrict: "E",
replace: true,
template: "<iframe src='load.html'></iframe>",
transclude: true,
scope: {},
link: function (scope, element, attrs) {
element.on('load', function () {
scope.$apply(function (){
scope.$parent.$parent.isLoading = false;
});
});
}
}
});
app.controller('MainCtrl', function() {
this.items = [];
this.isLoading = false;
this.add = function (value){
this.isLoading = true;
this.items.push(value);
};
});
И не работает как хотелось бы: свойство isLoading в экземпляре контроллера не меняется. соответственно не скрывается DIV isloading. Возможно ли заставить одинаково работать? я понимаю, что проблема в директиве, в link, но как сделать иначе?