Question

几天后我试图调试为什么我的指令不起作用。按下按钮时没有发生任何事件。最后我发现哪条线打破了一切！

在模板内部html我有行datepicker-popup ng-model="{{model}}" min-date="{{minDate}}" is-open="{{isOpened}}"如果我删除它一切正常。但它是我的自定义指令中必不可少的部分，我想保留它。我假设问题是我在自定义指令中使用指令？

你能帮我找出问题并找到正确的解决方案吗？

感谢您的帮助！

指令：

(function(){

    function directive(){
        return {
            scope :{
                model:'=model',
                minDate:'=minDate',
                isOpened:'=isOpened'
            },
            restrict: 'E',
            templateUrl: 'templates/datepicker/datepicker.html',
            controller: 'Ctrl'
        };
    };

    app.directive('myDirective', directive);

})();

控制器：

(function(){

    function Controller($scope) {
        $scope.open = function() {
            alert('HELLO');
        };
    app.controller('Ctrl', Controller);

})();

模板html：

<fieldset>
    <div class='input-group'>
        <input type="text" class="form-control" datepicker-popup ng-model="{{model}}" min-date="{{minDate}}" is-open="{{isOpened}}" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span ng-click="open()" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</fieldset>

Answer 1

正如另一个答案中所提到的，你不需要模板中的花括号，因为它是双向绑定。

您的点击功能的问题可能是您的自定义指令的孤立范围。如果您希望在主控制器中使用new_data = data(all(...), :)方法，则可以将其传递到隔离范围。

请在下面找到您的指令演示，或在此处jsfiddle。

open

angular.module('demoApp', ['ui.bootstrap'])
    .controller('mainController', Controller)
    .directive('customDir', Directive);

function Directive() {
    return {
        scope: {
            model: '=',
            minDate: '=',
            isOpened: '='
        },
        transclude: true,
        restrict: 'E',
        templateUrl: 'templates/datepicker/datepicker.html',
        //controller: 'Ctrl'
        controller: function($scope) {
            $scope.open = function() {
                console.log('open popup now!!');
                $scope.isOpened = true;
            };
        }
    };
}

function Controller($scope) {
    $scope.open = function () {
        alert('HELLO'); // not called becasue of isolated scope of custom directive
    };
    $scope.dateModel = {
        date: new Date(),
        min: new Date()
    };
    $scope.isOpened = false;
}

Answer 2

使用 = 符号定义指令的范围属性时，您不需要在视图中使用 {{}} 。

从您的视图中删除 {{}} ：

<input type="text" class="form-control" datepicker-popup ng-model="model" min-date="minDate" is-open="isOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />

Here's有关使用 = ，＆amp; 和 @ 的指令范围属性的更多信息。

角度指令问题

2 个答案: