Question

首先，我在这里设置了一个JSFiddle：http://jsfiddle.net/qLagkgt5/3/

我希望标题清晰，但基本上，我试图使用指令来帮助重复html。在JSFiddle的示例中，我使用的是box指令，其中包含spacing和box-type选项。

我正在变成可重复代码的HTML：

<div class="box">
    <div class="box-inner">
        {{CONTENT GOES HERE}}
    </div>
</div>

使用可选课程：

<div class="box spacing-small box-rounded">
    <div class="box-inner">
        {{CONTENT GOES HERE}}
    </div>
</div>

我希望能够做到的是：

<box spacing="small" box-type="rounded">
    {{CONTENT GOES HERE}}
</box>

这显然是一个非常简化的html集合，并不一定需要一个指令，但它只是一个例子来说明我遇到的情况。

现在到了有意义的一面......

这是我的控制器：

app.controller("Ctrl", ["$scope", function($scope) {

    $scope.text = "Starting Text... FOOBAR!";

}]);

这是我的指示：

app.directive("box", function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            spacing: "@",
            boxType: "@"
        },
        template: '<div class="box" ng-class="{\'spacing-{{spacing}}\' : spacing, \'box-{{boxType}}\' : boxType}"> <div class="box-inner" ng-transclude></div></div>'
    }
});

如果我现在将我的指令放在html中，并使用这样的控制器：

<div class="wrap" ng-controller="controller">
    {{text}}
    <box spacing="small">
        <input ng-model="text"/>
    </box>
</div>

当我更改框内的输入时，<box>之外的$ scope.text永远不会更新。

如何制作它，以便在使用此指令时，框内的内容会上升到父作用域而不是隔离的作用域？
如果我将一个盒子嵌套在另一个盒子里面，我是否也可以将它放到同一个父盒子里？

谢谢！

Answer 1

我在stackoverflow上读到了一些内容，当我阅读你的帖子时，它立即跳了起来。它说像＆＃34;如果你没有一个点就做了，你做错了......＆＃34;我会在找到文章后立即将其发布在此处，但是现在我认为我已经修复了＃34;你的代码：

<div ng-app="app" ng-controller="Ctrl">
    <h1><span class="grey">$scope.data.text:</span> {{data.text}}</h1>
    <box spacing="large" box-type="rounded">
        <h2><span class="grey">$scope.text in box directive:</span> {{data.text}}</h2>
        <input ng-model="data.text" />
    </box>
    <box spacing="small" box-type="rounded-shadow">
        <h2><span class="grey">$scope.text in different box directive:</span> {{data.text}}</h2>
        <input ng-model="data.text" />
    </box>
</div>

var app = angular.module("app", []);

app.controller("Ctrl", ["$scope", function($scope) {

    $scope.data = {};
    $scope.data.text = "Starting Text... FOOBAR!";

}]);

app.directive("box", function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            spacing: "@",
            boxType: "@"
        },
        template: '<div class="box" ng-class="{\'spacing-{{spacing}}\' : spacing, \'box-{{boxType}}\' : boxType}"> <div class="box-inner" ng-transclude></div></div>'
    }
});

您必须创建一个对象并将其用于数据绑定。我现在正在使用＆＃34; data.text＆＃34;并使用此表达式进行绑定。

干杯，添

P.S。：有很多链接。

仅提两个：

AngularJS: If you are not using a .(dot) in your models you are doing it wrong?

AngularJS: dot in ng-model

角度指令：隔离范围＆amp; Transclude是真的，但指令中的HTML需要继续绑定到父$ scope

1 个答案: