时间戳

首页 > 解决方案 > 无法理解 angularjs 组件。之前只使用过指令

angularjs - 无法理解 angularjs 组件。之前只使用过指令

问题描述

所以我一直在使用一个控制器一个视图，并且只对我想重复使用的部分使用指令。

现在我要去面试，我被要求了解组件，我从来不知道它存在。我正在尝试用它替换指令，但甚至无法将简单对象从父控制器传递到组件中。

  1. （第一个问题）我一直在使用 $scope 来做所有事情。现在我正在阅读组件，我看到 $ctrl 到处都在使用，有什么不同？

应用程序.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>

段落组件.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 
    })
  1. （第二个问题），我在这里做错了什么，我什至不能将一个简单的对象传递给组件

请帮忙，我需要在今天结束之前把头绕在组件上，昨天我整晚都在读这个，但还是不太明白。我什至不了解组件的好处，当指令可以根据我的理解做更多事情时

标签： angularjsangularjs-components

解决方案

别担心，这没什么新鲜的。AngularJS 组件 API只是一个指令 API 的包装器。.component当您使用API时，它会在幕后创建一个指令。引入这些更改是为了使 AngularJS 迁移到 Angular(2+) 版本更顺畅。此外，API 的可读性看起来也很相似，因为 Angular 完全基于component.

回到你的问题

  1. 每当您controllerAs在定义控制器时使用模式时，所有绑定值都驻留在您的$scope.controllerAlias变量中。最终，如果您看到别名中的内容，您将看到this（上下文）完全填充在那里。您不应该$scope在控制器内部使用，而是所有内容都将驻留在您的控制器功能this中，这只不过是$ctrl默认的控制器别名。

  2. 您在使用组件名称时出现拼写错误。paragraph-Component标签应该是paragraph-component

    <paragraph-component obj="paragraphToWrite"></paragraph-component>

推荐阅读