Question

我有一个页面的两个部分，其中包含几乎相同的表单。唯一的区别是父作用域中的一些对象的措辞和值。如何告诉视图或控制器使用一个范围变量而不是另一个？

Contrived Example：

myApp.controller('ParentController', function($scope) {
    $scope.container = {
        someA: { a: 1, b: 3 },
        someB: { a: 2, b: 4 }
    }
});

myApp.controller('ChildController', function($scope) {
    // Some scope variable that gets the value of container.someA
    // or container.someB

    $scope.result = $scope.someValue.a + $scope.someValue.b;
});

然后我可以在两个使用相同模板的子视图中使用$scope.result。

<div ng-controller="ParentController">
   <!-- Include #1 -->
   <div ng-include="someTemplate.html" ng-controller="ChildController"></div>
   <!-- Include #2 -->
   <div ng-include="someTemplate.html" ng-controller="ChildController"></div>
</div>

如何判断包含＃1使用$scope.container.someA的值并包含＃2以使用$scope.container.someB的值？

Answer 1

这是指令的典型案例。

app.directive("name", function() {
    return {
        restrict: "A",
        templateUrl: "someTemplate.html",
        scope: {
            someValue: "="
        },
        controller: function($scope) {
            $scope.result = $scope.someValue.a + $scope.someValue.b;
        }
    };
});

将其用作：

<div ng-controller="ParentController">
    <!-- Include #1 -->
    <div my-template some-value="container.someA"></div>
    <!-- Include #2 -->
    <div my-template some-value="container.someB"></div>
</div>

你必须注意孤立的范围， NOT 从父范围继承东西;因此，您必须传递指令中所需的任何数据，就像scope: { someValue: "=" }一样。

以角度重复使用部分和控制器

1 个答案: