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

以下是将两者都转换为组件的示例，您可以根据需要将父级留给控制器。大多数人感到奇怪的是，使用“＆”函数绑定时必须为参数发送对象。如果您不需要返回参数，那么它会变得更容易:)希望能有所帮助。

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迁移

1 个答案: