AngularJS：使用组件从$scope迁移_Angularjs_Angularjs Scope

AngularJS：使用组件从$scope迁移

angularjs

AngularJS：使用组件从$scope迁移,angularjs,angularjs-scope,Angularjs,Angularjs Scope,我正在尝试替换我使用的应用程序中的一些功能，$scope和$scope.$parent，其中基于子组件中发生的行为，我可以根据父组件中的值调用存储在父组件中的方法 function ChildController($scope) { $scope.doThing = function() { $scope.$parent.doThing() } function ParentController($scope) { ... $scope.stuf

我正在尝试替换我使用的应用程序中的一些功能，

$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，我在一个内部系统上工作，所以导入其他脚本实际上不是一个选项。谢谢你的帮助
 下面是一个将这两个组件都转换为组件的示例，如果您愿意，您可以将父级保留为控制器。大多数人觉得奇怪的是，在使用'&'函数绑定时，必须为参数发送一个对象。如果您不需要返回参数，那么就更容易了：）希望这有帮助
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);
      }
    });

})();

（函数（）{
"严格使用",；
有棱角的
.module（'myApp'，[]）
.component（'parentComponent'{
控制器：函数（）{
var ctrl=this；
ctrl.handleClick=function（id）{console.log（id）}；
},
模板：“”
})
.component（'childComponent'{
绑定：{问候语：'@'，单击我：'&'}，
模板：`
{{$ctrl.greeting}
运行父函数
`,
控制器：函数（）{
var ctrl=this；
console.log（this）；
}
});
})();

普朗克
更新了代码以修改父级中的某些内容。请注意，我将问候语绑定从“@”（字符串文字）更改为“您可以使用组件绑定将函数从父级传递到子级”。尝试此操作时，它似乎是在创建函数的本地版本，因此不会影响父级数据。这是我想要的行为还是我这边的问题？你能展示一下你是如何尝试的吗？如果这只是一个bug的话，这可能值得一个完整的问题。我将进一步研究绑定，看看是否有可能走这条路线，这样做似乎很有意义。如果handleClick对父控制器中的对象做了一些操作，这仍然有效吗？这看起来很有希望，但这正是我在尝试绑定时遇到的问题。@Paw请参阅上面更新的代码。我相信这就是你要找的？Plunker也更新了更新：原来这个bug是由父控制器引起的！不太清楚为什么，但如果没有真正的组件传递父方法，它会执行一些非常奇怪的半绑定。将父控制器封装在组件中解决了该问题。
(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>
      `
    });

})();