Angular将作用域传递给ng-include。

16 浏览
0 Comments

Angular将作用域传递给ng-include。

我有一个控制器，我在我的应用程序中的多个地方使用ng-include和ng-repeat，像这样：

在控制器/模板中，我期望item值存在，并且整个控制器都是围绕这个想法构建的。然而，现在我需要以稍微不同的方式使用控制器，不使用ng-repeat，但仍然需要能够传递一个item。我看到了ng-init，以为它可以做到我需要的，像这样：

但似乎不起作用。有人有任何想法如何在这样的唯一实例中传递一个变量给作用域吗？

编辑：

上面的控制器加载了leftItem和rightItem的值，类似于这样：

.controller('MainController', function($scope, ItemModel) {
    ItemModel.loadItems()
        .then(function(items) {
            $scope.$apply(function() {
                $scope.leftItem = items.left;
                $scope.rightItem = items.right;
            });
        });
});

0

3 答案

0 Comments

在Angular中，有时候我们需要在ng-include指令中传递作用域（scope）值。但是通常情况下，使用ng-init或onload指令是无法实现的。为了解决这个问题，我们可以将ng-include指令重写成一个自定义指令，并通过scope属性绑定所需的值。

具体的解决方法如下所示：

1. 首先，我们需要创建一个自定义指令。可以在Angular的模块中定义该指令，或者在单独的文件中定义。

angular.module('myApp', [])
.directive('includeWithScope', function() {
    return {
        restrict: 'AE',
        scope: {
            item: '=' // 通过scope属性绑定作用域值
        },
        templateUrl: 'my-template.html' // 指定模板路径
    };
});

2. 在HTML中使用自定义指令，并传递作用域值。

在上面的示例中，我们将作用域值myItem传递给include-with-scope指令的item属性。

通过以上的解决方法，我们可以在ng-include指令中传递作用域值，而无需每次都编写特定的自定义指令。这样可以提高代码的可重用性和开发效率。希望这篇文章对解决类似问题有所帮助！

0
0 Comments

Angular中的ng-include指令通常用于将外部HTML文件包含到主HTML文件中。然而，ng-include默认情况下并不会将父作用域传递给被包含的HTML文件，这就导致了在被包含的文件中无法直接访问父作用域中的变量。为了解决这个问题，可以使用一个内置指令来扩展控制器的作用域，从而在使用ng-include时隔离变量名称。

解决方法如下：

1. 在ng-include指令中添加一个内置指令（如ng-if），并将其设置为true，以创建一个独立的子作用域。

2. 使用onload属性将父作用域中的变量绑定到ng-include中的变量。

3. 在模板文件中，可以多次绑定同一个变量，每次使用不同的值。

具体操作如下：

上述代码中，通过在ng-include中添加ng-if指令，创建了一个独立的子作用域。这样，item变量在扩展的作用域中是唯一的，并且不会与其他作用域中的变量冲突。

在ng-include所引用的item.html模板文件中，可以使用item变量来展示不同的数据。

解决方法的实际效果可以通过以下链接查看：这里是一个示例。

通过使用ng-if指令来扩展作用域，可以解决item变量在控制器作用域中的变化问题，从而保持变量的唯一性。

此外，还有一个提示：如果在加载后（异步加载）动态填充一个值，而该值在include语句评估时不可用，可以将if语句改为ng-if="myVariable"，这样只有在myVariable被填充时才会加载。

总之，使用onload属性并不是一种优雅的解决方法，因为它会将一个变量设置在全局作用域中。为了避免变量名冲突，我们可以通过引入ng-if指令来创建独立的子作用域，从而实现每个ng-include的独立作用域。

0
0 Comments

Angular传递作用域给ng-include的问题出现的原因是ng-include创建的子作用域无法看到$scope.leftItem/$scope.rightItem的更新。解决方法是在父作用域中初始化一个对象，然后在异步数据加载时更改该对象的属性。也可以使用服务来存储这些值。另一种解决方法是将其重新构建为一个指令，以便可以绑定作用域。

0