AngularJS: 使用组件从 $scope 迁移

Question

我正在尝试替换我使用 $scope 和 $scope.$parent 的应用程序中的某些功能，根据子组件中发生的行为，我可以调用存储在父组件，基于父组件中的值。

function ChildController($scope) {
    $scope.doThing = function() {
        $scope.$parent.doThing()
    }

function ParentController($scope) {
    ...
    $scope.stuff = {...};
    $scope.doThing = function() {
        // does thing to stuff
    }
}

这些天，我使用 var ctrl = this; 更多，我想知道我 应该如何 处理这个问题。我已经尝试过组件绑定，但它们似乎有点离谱。有人知道怎么做最好吗？

我正在使用 angularjs 1.6.1 并且我正在内部系统上工作，因此导入其他脚本并不是一个真正的选择。感谢您的帮助！

Answer 1

这里是一个将两者都变成组件的例子，如果你愿意，你可以给父级留下一个控制器。大多数人觉得奇怪的是在使用“&”函数绑定时必须为参数发送一个对象。如果您不需要 return 参数，那么这会更容易 :) 希望这有帮助。

Html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>simple component example</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="myApp">
  <parent-component></parent-component>
</div>
</body>
</html>

Javascript:

(function() {
  'use strict';
  angular
    .module('myApp', [])

    .component('parentComponent', {
      controller: function() {
        var ctrl = this;
        ctrl.handleClick = function(id) { console.log(id) };
      },
      template: '<child-component click-me="$ctrl.handleClick(id)" greeting="hello"></child-component>'
    })

    .component('childComponent', {
      bindings: { greeting: '@', clickMe: '&' },
      template:`
        <div>
          <h1>{{$ctrl.greeting}}</h1>
          <button ng-click="$ctrl.clickMe({id: '101010'})">Run Parent Function</button>
        </div>
      `,
      controller: function() {
        var ctrl = this;
        console.log(this);
      }
    });

})();

笨蛋 Here

更新代码以修改父项中的某些内容。请注意，我将问候语绑定从“@”（字符串文字）更改为“<”（单向绑定表达式） .现在传回给父函数的id会附加到父函数中的greeting变量，发送给子函数显示。 插件我也更新了

(function() {
  'use strict';
  angular
    .module('myApp', [])

    .component('parentComponent', {
      controller: function() {
        var ctrl = this;
        ctrl.greeting = 'hello';
        ctrl.handleClick = function(id) { ctrl.greeting += id };
      },
      template: '<child-component click-me="$ctrl.handleClick(id)" greeting="$ctrl.greeting"></child-component>'
    })

    .component('childComponent', {
      bindings: { greeting: '<', clickMe: '&' },
      template:`
        <div>
          <h1>{{$ctrl.greeting}}</h1>
          <button ng-click="$ctrl.clickMe({id: '101010'})">Run Parent Function</button>
        </div>
      `
    });

})();

AngularJS: 使用组件从 $scope 迁移

AngularJS: migrating from $scope with components

angularjs

angularjs-scope