Question

我使用指令作为表单构建器工具的自定义表单元素的包装器。该指令应用于每个表单元素，创建基本模板和隔离范围（它应该在多个表单元素的ng-repeat内运行）。

此指令＆＃34; formElement＆＃34;与行为指令一起应用＆＃34; configurableElement＆＃34;绑定＆＃34;点击＆＃34;事件启用单击允许配置不同面板中的每个元素。在＆＃34; configurableElement＆＃34;上触发click事件时指令后者触发基本指令的控制器功能，称为＆＃34;编辑＆＃34;它反过来应该访问基本的应用程序控制器MainCtrl并触发＆＃34; editElement＆＃34;功能，它反过来设置＆＃34; editedElement＆＃34;控制器范围的属性。

问题在于虽然调用了控制器（＆＃34; MainCtrl＆＃34;）editElement函数（我知道因为我看到＆＃34;触发了＃34;在控制台中）视图没有得到更新的＆＃34; editedElement＆＃34;值。我不想设置超时并在控制器内调用$ scope。$ apply（）函数来更新视图。我只想了解为什么会这样。

angular.module('myApp', [])
   .controller('MainCtrl', function($scope){
        $scope.element = {label:"First Name", placeholder:"Type in your name"};
        $scope.editedElement = null;
        $scope.editElement = function(element) {
            console.log("triggered");
            $scope.editedElement = element;
        };      
   })
   .directive('formElement', function() {
        return {
            transclude: true,
            templateUrl: '/templates/elementView.html',
            scope: {
                element: '=formElementView',
                edit: '&configurableElement'
            },
            controller: function($scope) {
                this.edit = function() {
                     $scope.edit({'element':$scope.element});
                };
            }
        };
   })
   .directive('textFormElement', function() {
        return {
            templateUrl: '/templates/textElement.html',
        };
   })
   .directive('configurableElement', function(){
        return {
            require: '^formElementView',
            link: function(scope, element, attributes, formElementViewCtrl) {                   
                element.bind('click', function(){                       
                    formElementViewCtrl.edit();
                });
            }
        }
   });

html如下

<div ng-app="myApp">
    <div ng-controller="MainCtlr">
        {{editedElement}}
        <div data-form-element-view="element" data-configurable-element="editElement(element)">
            <div data-text-form-element></div>
        </div>
    </div>
</div>

调用控制器函数不会触发$ scope。$ apply（）

0 个答案: