1

我有一个 angular-bootstrap 模态弹出框，其中包含模板中的自定义指令：

模态.html

<div class="modal-header">
    <h3 class="modal-title">Modal Header</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-12">
            <my-directive ng-model="test" ng-change="doSomething()" />
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="upload()">Upload</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

模态控件.js

app.controller('ModalCtrl', function ModalCtrl( $scope, $modalInstance ) {
    $scope.test = 'empty';

    $scope.upload = function() {
        $scope.test = 'change!';
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});

我从我的主控制器打开模式弹出窗口，如下所示：

MainCtrl.js

var app = angular.module( 'myApp', [ 'ui.bootstrap' ] );

app.controller('MainCtrl', function MainCtrl( $scope, $modal ) {
    $scope.openModal = function() {
        var modalInstance = $modal.open({
            templateUrl: '/assets/modals/Modal.html',
            controller: 'ModalCtrl',
            size: 'md'
        });
    };
});

正如您从上面的代码中看到的那样，模态模板包含我的自定义指令<my-directive>，该指令将$scope.test- 定义在ModalCtrl- 作为它的模型，并且应该$scope.doSomething()在该模型更改时调用。

自定义指令如下所示：

MyDirective.js

angular.module( 'myApp' ).directive( 'myDirective', function() {
    return {
        controller: function( $scope ) {
            $scope.doSomething = function() {
                console.log( 'doSomething() called! $scope.test now = ' + $scope.test );
            };
        },

        link: function( $scope, el, att ) {
            console.log( '$scope.test = ' + $scope.test );
        },

        template: '<div class="thumbnail"></div>'
    };
} );

当模态弹出窗口打开时，控制台打印出$scope.test = empty这正是我期望看到的。但是什么时候$scope.test通过调用$scope.upload()函数来改变ModalCtrl什么都没有发生！我认为应该发生的$scope.doSomething()是调用，然后应该在控制台中打印出来doSomething() called! $scope.test now = change!。

任何帮助将不胜感激，这让我发疯！

4

1 回答 1

1

我想到了。我没有使用 ng-model 和 ng-change 我添加了：

scope: {
    test: '@'
}

到我的指令并将其添加到我的链接函数中：

$scope.$watch( 'test', function() { 
    console.log( 'test changed' ); 
} );

然后我在我的指令标签中添加测试作为参数，如下所示：

<my-directive test="test" />

最后，每当我更改 $scope.test 时，我都会打电话$scope.$apply()，瞧！

于 2014-11-22T20:40:36.760 回答