Как угловая директива Двусторонняя привязка работает с bindToController и Scope - PullRequest
Новая
       15

Как угловая директива Двусторонняя привязка работает с bindToController и Scope

0 голосов
/ 07 марта 2019

Версия ： AngularJS v1.7.7

Браузер: Chrome

Справочная информация: I Требуется атрибут, определенный в directive'controller this point Двусторонняя привязка с параметром, определенным в родительском элементеобласть видимости контроллера

Код сбивает меня с толку, он обладает волшебной производительностью:

  1. консольная печать undefined, и родительский контроллер может изменять директиву, но директива не может изменять родительский контроллер 

angular.module('app', []).controller('mainController', function($scope) {
  $scope.text = 'main'
  $scope.bindText='hello'
  $scope.change = () => {
    $scope.bindText='llllllll'
  }
}).directive('testDirective', function() {
  return {
    restrict: 'E',
    template: '<p> {{vm.bindText}} this is directive<p>',
    bindToController: true,
    scope:{
      bindText:'='
    },
    controllerAs: 'vm',
    controller: function() {
      const vm= this;
      console.log(vm.bindText)
      vm.bindText = 'ggg'
    },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div ng-controller="mainController">
    <test-directive scope-fuc="ditConsoleScope" bind-text="bindText"></test-directive>
    <button ng-click="change()">{{ text }} {{ bindText }}</button>
  </div>
</body>
</html>

но если вы добавите $onInit, вот так:

vm.$onInit = function() { console.log(vm.bindText) vm.bindText = 'ggg' }

это будет работать, поэтому мне нужно использовать функцию перехвата компонента в директиве？

связь между bindToController и scope, если я удалю атрибут scope в приведенном выше коде ， У них больше нет привязки, даже если вы добавите $onInit,Почему?

, если вы удалите scope и установите bindToController следующим образом:

.directive('testDirective', function() { return { restrict: 'E', template: '<p> {{vm.bindText}} this is directive<p>', bindToController: { bindText: "=" }, controllerAs: 'vm', controller: function() { const vm= this; console.log(vm.bindText) vm.bindText = 'ggg' }, } })

такая же ситуация с первым

ПОЧЕМУ?Почему вообще нет правил?

...