Angular 指令问题

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

当您使用 = 符号定义指令的范围属性时，您不需要在您的指令中使用 {{}}观看次数。

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

<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 有关使用 =、& 和 @[=24 的指令范围属性的更多信息=].

Answer 2

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

您的点击功能的问题可能是您的自定义指令的独立范围。如果你想在主控制器中使用 open 方法，你可以将它传递给隔离范围。

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

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="demoApp" ng-controller="mainController">
    <script type="text/ng-template" id="templates/datepicker/datepicker.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>
    </script>
    
    <custom-dir model="dateModel.date" min-date="dateModel.min" is-opened="isOpened"></custom-dir>
</div>

Angular 指令问题

Angular directive issue

angularjs

angular-directive