Question

我有一些UI将在我的应用程序中重用，所以我正在为它做一个指令。我正在关注他们网站上的角度示例，我正在尝试这样做：

default.html中

 <contact-num-search info="{type: telephone}"></contact-num-search>
 <contact-num-search info="{type: email}"></contact-num-search>

directives.js

(function() {
    'use strict';
    var myAppModule = angular.module('myApp');

    myAppModule.directive('contactNumSearch', function () {
        return {
            templateUrl: 'Scripts/app/dashboard/templates/tmplContactNumberSearch.html',
            restrict: 'E',
            scope: {
                info: '='
            }
        }
    });
})();

tmplContactNumberSearch.html

<span class="btn-group" dropdown is-open="status.isopen" ng-mouseenter="status.isopen = true" ng-mouseleave="status.isopen = false">
    <a class="btn btn-primary dropdown-toggle" dropdown-toggle>
        {{info.type}}
    </a>
    <ul class="dropdown-menu" role="menu">
        <li>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">{{info.type}}</h4>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <input type="number" class="form-control" placeholder="Contact Number" aria-describedby="basic-addon2">
                        <span class="input-group-addon" id="basic-addon2"><input type="button" value="search" /></span>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</span>

我的模板中的子范围是一个空字符串：

{{info.type}}

我想用电话联系号码搜索电话和电子邮件联系号码搜索。

我做错了什么？

Answer 1

我最终改变了我的指示：

(function() {
    'use strict';
    var myAppModule = angular.module('myApp');

    myAppModule.directive('contactNumSearch', function () {
        return {
            templateUrl: 'Scripts/app/dashboard/templates/tmplContactNumberSearch.html',
            require: '^info',
            restrict: 'E',
            scope: {
                type: '@'
            }
        }
    });
})();



 <contact-num-search type="telephone"></contact-num-search>
 <contact-num-search type="emails"></contact-num-search>

通过说要求该元素属性，我能够传入文本。我最终没有通过JSON。

Answer 2

这就是我所做的。

<contact-num-search info="{type: 'telephone'}"></contact-num-search>
<contact-num-search info="{type: 'email'}"></contact-num-search>

你对象错误的方式。它应该是这样的

info="{type: 'telephone'}"和不 info="{type: email}"

这是工作plunker

将值传递给指令不起作用 - AngularJS /指令

2 个答案: