Question

我是使用1.5组件的新手，我不确定组件是如何工作的，或者我刚刚做错了什么。我创建了以下组件：

angular.module('app')
.component('appModal', {
    templateUrl: 'templates/modals/AppModal.html',
    controller: 'AppModalController',
    bindings: {
        resolve: '<',
        modalInstance: '<',
        close: '&',
        dismiss: '&'
    },
})
.controller('AppModalController', function() {
    var _this = this;

    this.submit = function() {
        this.close({ $value: this.data });
    };

    this.cancel = function () {
        this.dismiss('cancel');
    };

    this.$onInit = function() {
        this.data = this.resolve.data;
    };
});

因为你可以看到我使用ui-bootstrap组件模型创建了一个模态组件。这是有效的，但是打开模态时会关闭/解除模态的功能，在模态打开后立即关闭模态。似乎不仅是变量已初始化，而且方法也是在加载组件时。我不确定这是组件如何工作还是我做错了。

我按照ui-bootstraps网站（https://angular-ui.github.io/bootstrap/）上的示例进行了操作。任何帮助和见解都将非常受欢迎。

更新：

转而您可以直接访问视图中的绑定。它们会自动绑定到控制器，因此您可以在视图中使用别名（默认别名为$ ctrl）并直接调用$ ctrl.close（）。无需将它们绑定到组件控制器中的函数。

angular.module('app')
.component('appModal', {
    templateUrl: 'templates/modals/AppModal.html',
    controller: 'AppModalController',
    bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
    },
})
.controller('AppModalController', function() {
    var _this = this;

    this.$onInit = function() {
        this.data = this.resolve.data;
    };
});

以上示例是重新分解的组件控制器。我删除了调用模态关闭和解除函数的方法。

<div class="modal-header modal-header-color">
    <h3>My Modal</h3>
</div>
<div class="modal-body">
    <form>
       <label>Do form related stuff here</label>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="$ctrl.close()">Submit</button>
    <button class="btn btn-warning" ng-click="$ctrl.dismiss('cancel')">Cancel</button>
</div>

请注意，您可以直接使用控制器别名!!

来调用close和dismiss方法

注意：重要的不是你指定的“this”，“this”将始终绑定到控制器。示例：var foobar = this; ＆lt; - foobar仍将绑定到控制器，因此您指定“this”的变量名称不重要：）

Answer 1

我已经尝试将代码粘贴到演示插件中，我似乎无法重现模态自动关闭，但是您应该考虑几件事情

您没有设置controllerAs属性，这意味着您必须将控制器this绑定到$ctrl（类似于演示插件），如果您希望使用_this然后添加

controllerAs：＆＃39; _this＆＃39;

以后再做

var _this = this;

并将您的方法绑定到_this，而不是this

_this.cancel = function () {...)

或者只需将_this替换为$ctrl

确保您没有过早地从模板中调用this.cancel或在控制器中的其他位置关闭模式

Answer 2

这是组件使用的示例。你可以使用vm。

(function () {
    'use strict';

    angular
        .module('example')
        .component('exampleInput', exampleInput());


    function exampleInput() {

        var component = {
            controller: ProActiveController,
            bindings: {
                exampleHint : '<'
            },
            templateUrl : 'components/example-input/example-input.html'
        };
        return component;
    }

    function ExampleInputController($scope)
    {
        /** inits */

        var vm = this;
        vm.clearButton = clearButton;
        activate();

        /** functions */

        function activate() {
           loadAuto();
        }

        function loadAuto() {

        }

        function clearButton() {
            vm.searchText = '';
        }
    }

})();

Angular 1.5.9组件：加载组件时触发的函数

2 个答案: