Question

HTML：

<teacher-modal modal-type="edit" file-name="teacherModal"
    button-title="DerecEdit" modal-value="teacher"
    button-class="" message="teacherCtrl.message">
</teacher-modal>|
 {{teacherCtrl.message}}

指令：

(
function(){
    angular.module('MockApp')
        .directive('teacherModal',teacherModal);

    function teacherModal(){
        var directive = {
            restrict: 'EA',
            scope:{
                'type': '@modalType',
                'title': '@buttonTitle',
                'class': '@buttonClass',
                'fileName': '@fileName',
                modalValue: '=',
                message: '=',
            },
            template:'<a type="button" class="{{class}}" ng-click="modalDCtrl.open(modalValue,fileName)">{{title}}</a>',
            controller:'modalDirectiveController as modalDCtrl'
        }
        return directive;
    }

    angular.module('MockApp')
        .controller('modalDirectiveController', modalDirectiveController);

    modalDirectiveController.$inject = ['$uibModal','TeacherService','$scope', '$rootScope'];

    function modalDirectiveController($uibModal , TeacherService , $scope, $rootScope){

        var vm = this;

        vm.open = function(teacher,fileName){
            var msg;

            console.log('open function of teacher modal ctrl' + fileName);
            var modalInstance = $uibModal.open({
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: 'components/modalComponent/teacher/'+fileName+'.html',
                controller: 'TeacherModalController as teacherModalCtrl',
                size: 'md',
                resolve:{
                    newTeacher:function(){
                        return teacher;
                    }
                }
            });

            modalInstance.result.then(function (result) {
                console.log('result of directive controller');

                if(result.actionType == 'Add Teacher')
                    $scope.message = result.teacherName + " has been added";
                else
                    $scope.message = result.teacherName + " has been edited";
//<!-- The above $scope.message is not being viewed but I want to show this message -->
                $rootScope.$broadcast("updateMessage", msg);
            }, function () {
                console.info('Modal dismissed at: ' + new Date());
            });
 // <!-- This $scope is being viewed but I dont want to show this message -->
            //$scope.message = 'hello from teacher-modalnn.js';
        }
    }

}
)();

modalInstance.result.then（）函数内的

$ scope.message 未预览，而正在查看函数外的 $ scope.message 。

当我们使用$ rootScope.broadcast（）时，正在预览消息，但我不想使用$ broadcast服务。

Github 网址：this
谁能回答我为什么以及怎么回事？

Answer 1

您在角度上下文（XHR调用）之外应用了一个值，因此您需要使用$ apply（）。

$ apply（）用于从外部执行AngularJS中的表达式 AngularJS框架。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库）。因为我们正在呼唤我们需要在AngularJS框架中执行适当的范围生命周期

所以试试这个：

...
$scope.$apply(function() {
        $scope.message = result.teacherName + " has been added";
});
...

$ scope值不会从指令控制器的modalInstance.result.then（）更改

1 个答案: