有没有办法将布尔值(dataLoad(从隔离的范围指令传递到另一个元素,以便在登录操作期间加载数据时显示进度条?
索引.html
<div class="progress-line" ng-show="dataLoading"></div>
<login-user email = "email" password = "password" show-nav-bar="showNavBar" recover-password="recoverPassword(email)" data-loading="dataLoading"></login-user>
login.component.js
angular
.module('login')
.directive('loginUser', [function() {
return {
scope: {
email: '=email',
password: '=password',
showNavBar: '=showNavBar',
dataLoading: '=dataLoading',
recoverPassword: '&'
},
controller: 'LoginController',
templateUrl: 'login/login.template.html',
};
}]);
login.controller.js
function recoverPassword(email) {
console.log("recoverPassword email: " + email);
$scope.dataLoading = true;
authenticationService.recoverPassword(email, function (response) {
console.log("Response success, status: " + angular.toJson(response.data.status) + " message: " + angular.toJson(response.data.message));
$scope.message = response.data.message;
$scope.dataLoading = false;
});
}
通常,更好的做法是使数据沿一个方向流动。因此,dataLoading
变量的所有者应该是 2 个组件的公共父级。
如果该布尔值的逻辑应该在组件user-login
,您可以(通过 &
(向它传递回调,然后user-login
组件将在开始获取数据时调用它,然后父级将更改该布尔值,并将其传播给相关的子项。
const app = angular.module('app', []);
app.directive('parentComponent', function() {
return {
controllerAs: 'parentVM',
controller: function() {
this.isLoading = false;
this.onLogin = () => {
this.isLoading = true;
}
},
template: '<div><child on-login="parentVM.onLogin()"></child><other-child is-loading="parentVM.isLoading"></other-child></div>'
};
})
.directive('otherChild', function() {
return {
scope: {
localLoading: '=isLoading'
},
template: '<div ng-class="{'is-loading':localLoading}">{{localLoading? 'Loading...': ''}}</div>'
}
})
.directive('child', function() {
return {
scope: {
onLogin: '&'
},
template: '<button ng-click="onLogin()">Login</button>'
};
})
.is-loading {
background-color: rgba(0, 200, 0, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="app">
<parent-component></parent-component>
</div>
您可以使用 EventEmitter 将数据发送到控制器。
EventEmitter({loading: true })
在组件上添加绑定以捕获更改:
onDataChanges: '&'
您可以在组件控制器上捕获数据:
callbackdata(data) {
this.loading= data.loading;
}
而你的观点:
<login ... onDataChanges="callbackdata($event)" ...></login>
是的,绝对是。您可以创建一个公开"加载"属性的服务,然后将该服务注入控制器和指令。在指令中设置服务的"加载"属性。这就是您的指示的全部内容。现在,将注入指令的相同服务注入到元素的控制器中。因此,如果该服务称为myloadservice,您将执行类似$scope.myloadservice = myloadservice的操作。一旦有了,您就可以直接绑定到元素中服务的加载属性,如下所示:ng-show="myloadservice.load">
希望这有帮助。