Question

请考虑以下事项：

<script type="text/ng-template" id="myTemplateName">
{{item.SomeProperty}}
<script>

<div ng-repeat="container in List">
    <div ng-repeat="item in container.Items">
        <!-- CASE 1 -->
        <div ng-include="'myTemplateName'"></div>
    </div>    
    <!-- CASE 2 -->
    <div ng-include="'myTemplateName'" />
</div>

上面的代码适用于case1，但不适用于case2：案例1将起作用，因为模板使用 item ，该模板由模板外的ng-repeat语句提供，case 2不不行，因为没有项目，而我希望它使用container.SomeProperty。

也许我误用了角度包含，但我想在ASP.Net MVC中使用它们像partials一样。在那里，您可以定义部分，并且您可以传入模型。

是否有任何角度允许我设置项在模板中的含义？

使用Matt的答案解决了问题：

module.controller("ItemController", ['$scope', function ($scope) {
    $scope.templateitem = ($scope.$parent.item) ? $scope.$parent.item : $scope.$parent.$parent.container.Item;
}]);

但是，感觉有点脏：控制器需要知道如何使用它。如果我能从外面将它传递给控制器会更好。

更好的方法：

我真的不喜欢上面的解决方案，因为控制器需要知道它将如何使用，所以我使用了一个指令：

app.directive("opportunity", function () {
    return {
        restrict: "E",
        templateUrl: "opportunityTemplate",
        scope: { templateitem: "=model" }
    };
});

在视图中：

<script type="text/ng-template" id="opportunityTemplate">
    {{templateitem.SomeProperty}}
</script>

<opportunity model="container.Item"></opportunity>
<opportunity model="somethingElse.Item"></opportunity>

现在我需要知道的是我如何将templatename传递给指令，并且我可以制作一个可重复使用的“部分”指令（请告诉我，如果我在这里重新发明轮子？）

Answer 1

您需要使用的是ng-controller，或某些路由系统，如ui-router，通过路由定义将部分连接到控制器。

对于第一个示例，当您添加partial时，还要指定一个负责处理模型的控制器：

HTML：

<div ng-controller="MyCtrl" ng-include="'myTemplateName'" />
<!-- inside the template -->
<div>{{item.somekey}}</div>

控制器：

angular.module('myapp.ctrl', [])
.controller('MyCtrl', ['$scope', function($scope){
        $scope.item = { somekey: 'somevalue' };
    }]);

在第二个示例中，使用路由系统，如ui-router。这里可以看到一个例子，其中某些部分附加到控制器和特定网址：

https://github.com/angular-ui/ui-router/tree/gh-pages/sample

使用角度包括像mvc partials

1 个答案: