我有一个带有确认和取消方法的父模态指令。
ngDialog.open({
scope : true,
showClose : false,
template : theTemplate,
className : 'ngdialog-theme-prompt -small',
controller : ['$scope', function Ctrl($scope) {
$scope.message = message;
$scope.confirm = function(){
$scope.closeThisDialog();
resolve(true);
};
$scope.cancel = function(){
$scope.closeThisDialog();
resolve(false);
};
}]
}).closePromise.then(function () {
resolve(false);
})
模板是另一个指令。
<form class="edit-stakes-content">
<ul>
<li ng-repeat="stake in settings track by $index">
<input type="number" name="input" pattern="^\d+$" min="0" value="{{stake}}" />
</li>
</ul>
<div class="edit-stakes-control">
<button ng-click="cancel();" class="apl-btn apl-btn-link apl-btn-large" translate>CANCEL</button>
<button ng-click="confirm();" autofocus="true" class="apl-btn apl-btn-update apl-btn-large" translate>SAVE</button>
</div>
</form>
在模态的子指令中,我希望能够对服务器执行一些验证和POST,然后调用父模态指令确认或取消方法。
与此类似:
Directive.$inject = ['UserSettings'];
function Directive(UserSettings) {
function Link($scope) {
$scope.settings = angular.copy(UserSettings.get('presetStakeSettings').settings);
$scope.cancel = $scope.$parent.cancel();
}
return {
'link': Link,
'restrict': 'E',
'replace': true,
'templateUrl': 'betting/edit-stakes/edit-stakes.html'
}
}
调用父方法会抛出一个JavaScript范围内的错误。$ parent.cancel不是一个函数,但它似乎已经完成了这项工作。
在没有JavaScript错误的情况下,有没有更好的方法来实现子到父通信?
答案 0 :(得分:0)
$scope.$parent
通常可以被认为是反模式,它几乎没有很好的用途,通常它表明指令设计存在问题或范围继承不是很好理解。
Directive
指令不会请求新范围,因此可以安全地假设它与模态控制器中的范围相同。这意味着$scope.$parent
指的是模态范围的父级(可能是根范围),它没有cancel
属性。
这也意味着$scope.settings
分配会影响控制器范围 - 虽然它显然不应该。最好在此指令中使用scope: true
继承范围。
如果有scope: true
,则无关紧要,但$scope.cancel
将在指令中可用。它继承自模态范围。没有理由
$scope.cancel = $scope.$parent.cancel();