Question

我正在尝试创建一种html看起来像这样的商店：

<body>
   <main-wrapper>

    <head>
    </head>

    <wrapper-one>
       <products>
       </products>
    </wrapper-one>

    <wrapper-two>
        <log-in>
        </log-in>
    </wrapper-two>

    </main-wrapper>
</body>

这种做法的一点是我根本不使用控制器。只是指令。我想让这些指令相互通信。所以，让我们说当我登录时，我想将每个产品从“绿色”改为“蓝色”。

以下是指令：

app.directive("mainWrapper", function () {

return {
            transclude:true,
            restrict:'E',
            template: '<div class="container" ng-transclude></div>',
            controller : function($scope){
                this.addItem = function(val){
                    console.log(val);
                }
            }
        };
});

app.directive("wrapperOne", function () {

return {
            restrict:'E',
            transclude:true,
            require : '^mainWrapper',
            template: '<div class="col-sm-8" ng-transclude></div>',
            controller : function($scope){
                this.addItem = function(val){
                    console.log(val);
                }
            }
        };
});

app.directive("wrapperTwo", function () {

return {
            restrict:'E',
            require : '^wrapperOne',
            templateUrl: 'view/products.html',
            controller: function($scope, $element, $attrs) {
                $scope.products = 
                    [{product : 'car',color : 'green'}];
            }
        };
});

app.directive("logIn", function () {

return {
            restrict:'E',
            require : ['^wrapperTwo', '?products'],
            scope: true,
            link:function($scope,elem,attr,outerctrl){

            },
            templateUrl: 'view/login.html',
            controller: function($scope) {
             //login -> $scope.loggedIn = true
             //logout -> $scope.loggedIn = false
            }
        };
});

我试图让这个问题缩短，所以我留下了一些代码。因此，当用户登录和范围loggedIn为true时，我想更改产品的颜色。我现在一直在努力解决这个问题，而且很少帮助会很棒。

我将此代码重新编写到此处，因为我将它缩短为英语。我确信代码中有一些拼写错误，但不要担心它们。所有模板都正常工作，页面看起来与原始代码一致。

Answer 1

我找到了解决方案。在主包装里面我做了这个：

this.allProds = function (x) {
    this.products = [{ product: "car", color: x}];

    return this.products;
}

现在我可以在任何我想要的地方使用它。产品指令示例：

var products = outercontrol.allProds('blue');

Angularjs嵌套自定义指令

1 个答案: