Угловые 1.5.9 Компоненты: функции, запущенные при загрузке компонента

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-самозагрузкой. это работает, однако функция закрытия/отклонения модального режима запускается, когда модаль открыт, закрывая модально сразу после открытия модальности. Похоже, что инициализируются не только переменные, но и методы, когда компонент загружен. Я не уверен, работают ли эти компоненты, или если я что-то делаю неправильно. (https://angular-ui.github.io/bootstrap/). Любая помощь и понимание будут оценены наиболее высоко.

UPDATE:

Оказывается, что вы можете получить прямой доступ к привязок в представлении. Они автоматически привязываются к контроллеру, поэтому вы можете использовать псевдоним (по умолчанию псевдоним $ 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> 

Обратите внимание, что вы можете просто вызвать методы закрытия и увольнения непосредственно с помощью псевдонима контроллера!

ПРИМЕЧАНИЯ: Не имеет значения, к чему вы назначили «это», «это» всегда будет связываться с контроллером.Пример: var foobar = this; < - foobar по-прежнему привязывается к контроллеру, поэтому имя переменной, которую вы присвоили «этому», не имеет значения :)

Answer 1

Я пробовал вставить свой код в демонстрационный планк, и я не мог воспроизвести модальное автоматическое закрытие, однако есть несколько вещей, которые вы должны рассмотреть

1. вы не сделали установку атрибута controllerAs, что означает, что вы должны связать ваш контроллер this к $ctrl (по аналогии с демо шлепнуть), если вы хотите использовать _this, то добавьте

   controllerAs: '_this'

, а затем сделать

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

})();