代码之家 › 专栏 › 技术社区 › Wild Goat

角度方向问题

angular-directive angularjs

Wild Goat · 技术社区 · 11 年前

几天来,我一直在调试我的指令为什么不起作用。当我按下按钮时,没有触发任何事件。最后我发现哪一条线打破了一切!

内部模板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>

2 回复 | 直到 11 年前

AWolf 10 年前

正如在另一个答案中提到的,您不需要在模板中使用大括号,因为它是双向绑定。

单击函数的问题可能是自定义指令的孤立范围。如果你想 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>

Community Mohan Dere 9 年前

当您使用 = 符号,您不需要使用 {{}} 在您的观点中。

删除 {{}} 从您的角度来看:

<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 有关指令作用域属性的更多信息,请使用 = , & 和 @ .