Question

我正在使用Angular的自定义指令，该指令允许用户设置标题。但是，似乎没有按预期工作。

app.directive('appTitle', function () {
    var myTitle = {};
    myTitle.restrict = 'E';
    myTitle.scope = {
        //title: '='
        title: 'title='
    };
    myTitle.transclude = true;
    myTitle.template = "<div class='jumbotron'><h1 class='text-center'>
    {{text}}</h1><div class='text-center' data-ng-transclude></div></div>";
    return myTitle;
});

在HTML中使用它（描述效果不错但标题不是）：

<app-title title="This is a title">This is a description.</app-title>

提前致谢。

Answer 1

试试这个，因为你将String传递给指令。

myTitle.scope = {
    title: '@'
};

Answer 2

有两个问题：

首先，您的范围分配是错误的。将其更改为：

myTitle.scope = {
    title: '='
    // or
    // title: '=title'
};

第二，你必须将标题作为字符串传递，即在引号中，因为这将插入：

<app-title title="'This is a title'">This is a description.</app-title>

修改

我提到的是双向绑定，即如果你改变传递给指令的标题，它也会更新指令的模板。

请参阅下面的相同示例。这是基于你的要求。

var app = angular.module("sa", []); app.controller("FooController", function($scope) { }); app.directive('appTitle', function () { var myTitle = {}; myTitle.restrict = 'E'; myTitle.scope = { title: '=' }; myTitle.transclude = true; myTitle.template = "<div class='jumbotron'><h1 class='text-center'>"+ "{{title}}</h1><div class='text-center' data-ng-transclude></div></div>"; return myTitle; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="sa" ng-controller="FooController"> <input ng-model="myTitle" /> <app-title title="myTitle">This is a description.</app-title> </div>

因此，如果您在title: '='中使用scope，则可以传递以下属性：

<app-title title="'This is a title'">This is a description.</app-title> <app-title title="anScopeVariableOrModel">This is a description.</app-title>

如果您使用title: '@'，则上述两个将被写为：

<app-title title="This is a title">This is a description.</app-title> <app-title title="{{anScopeVariableOrModel}}">This is a description.</app-title>

我的角度指令有什么问题？

2 个答案: