Question

因此，我一直在使用一个控制器的一个视图，并且只对要重复使用的零件使用指令。

现在，我正在接受采访，我被要求学习有关组件的知识，而我从来不知道它存在。我正在尝试用它替换指令，但是甚至不能从父控制器将简单的对象传递给组件。

（第一个问题）我一直在使用$ scope进行所有操作。现在，我正在阅读组件，我看到$ ctrl随处可见，有什么不同？

app.js

var myApp= angular.module('bigMoveApp', ['ngRoute', 'testerModule']);

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.

    when('/', {
        templateUrl: 'app/Views/main.html',
        controller: 'ctrlMain'
    }).

    otherwise({
        redirectTo: '/'
    });

}]);

ctrlMain.js

myApp.controller('ctrlMain', ['$scope', function ($scope) {
 //code
     $scope.paragraphToWrite = { text: "let's write something" };
 //code
}])

main.html

<div id="main-body-wrapper">
<...>
    <paragraph-Component obj="paragraphToWrite"></paragraph-Component>
 <...>
</div>

paragraphComponent.js

    function paragraphController($scope, $element, $attrs) {
        var ctrl = this;
        ctrl.user = $scope.$parent.textFields.whatWeDo.title;
        var x = ctrl.obj;
    } 


    myApp.component('paragraphComponent', {
        templateUrl: '/app/Views/paragraphCom.html',
        bindings: {
            obj : '='
        },  
        controller: paragraphController 
    })

（第二个问题），我在这里做错了什么，我什至无法将简单的对象传递给组件

请帮忙，我需要在今天结束之前把头包裹好，昨天我整夜都在阅读这本书，但仍然不太了解。当指令可以根据我的理解做更多的事情时，我什至不了解组件的好处

Answer 1

别担心，这没什么新鲜的。 AngularJS组件API为just a wrapper around a directive API。在后台，当您使用.component API时，它将创建指令。引入这些更改是为了使AngularJS到Angular（2+）版本的迁移更加平滑。此外，由于Angular完全基于component，因此API的可读性也将类似。

回到您的问题

无论何时在定义控制器时使用controllerAs模式，所有绑定值都位于$scope.controllerAlias变量中。最终，如果您看到别名中的内容，您将看到this（上下文）恰好填充在那里。在这里，您不应该在控制器内部使用$scope，而是一切都将存在于控制器函数this中，该函数不过是$ctrl的默认控制器别名。
使用组件名称时出现错字。 paragraph-Component标记应为paragraph-component
```
<paragraph-component obj="paragraphToWrite"></paragraph-component>
```

难以理解angularjs组件。仅在

1 个答案: