Question

我无法显示template html内所有国家/地区的名称。我在父控制器中有功能，存储所有添加的国家/地区的列表。使用component bindings，如何将父controller的标签传递给template，以便template可以iterate list中的所有对象和显示值。我附上了代码片段。如果有人能指出我犯错的地方，我将不胜感激。谢谢。

<!DOCTYPE html>
<html ng-app="countriesApp">

<head>
    <meta charset="utf-8">
    <meta name="description" content="First Angular App">
    <meta name="keywords" content="HTML, Javascript, AngularJs">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
    <script src="app.js"></script>
    <title>Very basic AngularJs component example</title>
</head>

<body>
    <div ng-controller="addCountriesController as countryCtrl">
        <input type="text" placeholder="Add Country" ng-model="countryCtrl.country">
        <input type="button" value="Add" ng-click="countryCtrl.addCountry(countryCtrl.country)">
        <add-countries-component countryObj="countryCtrl"></add-countries-component>
    </div>
</body>

</html>

template html是：

<div>
    <ol>
        <li ng-repeat = "country in countryObj.allCountries">
            {{country.name}}
        </li>
    </ol>
</div>

我的app.js文件是：

(function () {
    'use strict';
    angular.module("countriesApp", [])
        .component("addCountriesComponent", { 
            templateUrl: "addcountries.html"
            , bindings: { 
                countryObj : "<"
            }
        })
        .controller("addCountriesController", addCountriesControllerFunction)
        .service("addCountriesService", addCountriesServiceFunction);

    addCountriesControllerFunction.$inject = ["addCountriesService"]
    function addCountriesControllerFunction(addCountriesService){
        var controller = this;
        var service = addCountriesService;
        controller.addCountry = function(country){
            return service.addCountries(country);
        }
        controller.allCountries = service.allCountries;
    } 

    function addCountriesServiceFunction(){
        var service = this;
        var countries = [];
        service.addCountries = function(country){
            var country = {
                name: country
            }
            countries.push(country);
        }
        service.allCountries = countries;
    }
})();

Answer 1

更改此

<add-countries-component countryObj="countryCtrl"></add-countries-component>

到

<add-countries-component country-obj="controller.allCountries"></add-countries-component>

并且

<div>
    <ol>
        <li ng-repeat = "country in countryObj">
            {{country.name}}
        </li>
    </ol>
</div>

并且

ng-controller="addCountriesController as controller"

Answer 2

在这里发生了一些事情。

建议仅传递该组件所需的数据。
如果您使用一个单词小写属性名称，则不必担心cameCase会出现蛇案解析。
不管你喜不喜欢，每个组件都有它自己的控制器，所以必须从中获取数据。
您在bindings属性中提供的名称描述了如何在控制器中命名传入的数据。

这是一个有效的Plunker。我从这个例子中删除了服务，因为我认为它只会混淆这一点，因为数据在控制器中的获取方式是无关紧要的。

或者......

您的代码已修改（YMMV）：

的index.html

<!-- It's good practice to pass in only the data you need. -->
<add-countries-component countries="countryCtrl.allCountries"></add-countries-component>

app.js

(function () {
    'use strict';
    function AddCountriesComponentController() {};  // <--- Create component controller

    angular.module("countriesApp", [])
        .component("addCountriesComponent", { 
            templateUrl: "addcountries.html",
            controller: AddCountriesComponentController,
            controllerAs: AddCountriesCompCtrl,  // defaults to $ctrl if not provided.
            bindings: { 
                countries: "<"   // 1-way binding whatever gets passed in as coutryObj in ComponentController.
            }
        })
    ...

})();

模板：

<div>
    <ol>
        <!-- Grab the countries from the Components own controller. -->
        <li ng-repeat = "country in AddCountriesCompCtrl.allCountries">
            {{country.name}}
        </li>
    </ol>
</div>

无法在angularJs

2 个答案: