Question

解决了这个问题，这是表明它有效的最后一个小提琴：

我有一个指令：

var StepFormDirective = function ($timeout, $sce, dataFactory, $rootScope) {
    return {
        replace: false,
        restrict: 'AE',
        scope: {
            context: "=",
            title: "="

        },
        template: '<h3>{{title}}</h3><form id="actionForm" class="step-form"></form><button ng-click="alert()" type="button">Save</button>',
        link: function (scope, elem, attrs) {
        }
    }
}

如何让alert()从控制器做一些事情？

这是一个小提琴： http://jsfiddle.net/mbaranski/tfLeexdc/

Answer 1

Angular可能是抽搐的，所以我已经建立了一个全新的小提琴来演示所有的＆＃34;胶水＆＃34;你需要做的工作。

首先，你没有将属性传递给指令，所以我做了那个调整：

    <div id="templatemo-blog">
        <div class="container">
            <div class="row">
                <div class="templatemo-line-header" style="margin-top: 0px;" >
                    <div class="text-center">
                        <hr class="team_hr team_hr_left hr_gray"/><span class="span_blog txt_darkgrey">BLOG POSTS</span>
                        <hr class="team_hr team_hr_right hr_gray" />
                    </div>
                </div>
                <br class="clearfix"/>
            </div>
            <div class="blog_box">
                <div class="col-sm-5 col-md-6 blog_post">
                    <ul class="list-inline">
                        <li class="col-md-4">
                            <a href="#">
                                <img class="img-responsive" src="images/blog-image-1.jpg" alt="gallery 1" />
                            </a>
                        </li>
                        <li  class="col-md-8">
                            <div class="pull-left">
                                <span class="blog_header">This Post</span><br/>
                                <span>Posted by : <a class="link_orange" href="#"><span class="txt_orange">Tracy</span></a></span>
                            </div>
                            <div class="pull-right">
                                <a class="btn btn-orange" href="#" role="button">21 February 2084</a>
                            </div>
                            <div class="clearfix"> </div>
                            <p class="blog_text">
                                Aliquam quis rutrum risus, ut condimentum ipsum. Nullam aliquet libero augue, eget auctor felis vulputate id. Proin a enim eu libero ornare malesuada. Sed iaculis fringilla lacinia. Sed laoreet lectus vitae [...]
                            </p>
                        </li>
                    </ul>
                </div> <!-- /.blog_post 1 -->

                <div class="col-sm-5 col-md-6 blog_post">
                    <ul class="list-inline">
                        <li class="col-md-4"><a href="#">
                            <img class="img-responsive" src="images/blog-image-2.jpg" alt="gallery 2" /></a>
                        </li>
                        <li class="col-md-8">
                            <div class="pull-left">
                                <span class="blog_header">WEBSITE TEMPLATE</span><br/>
                                <span>Posted by : <a class="link_orange" href="#"><span class="txt_orange">Mary</span></a></span>
                            </div>
                            <div class="pull-right">
                                <a class="btn btn-orange" href="#" role="button">18 February 2084</a>
                            </div>
                            <div class="clearfix"> </div>
                            <p class="blog_text">
                                    Morbi imperdiet ipsum sit amet dui pharetra, vulputate porta neque tristique. Quisque id turpis tristique, venenatis erat sit amet, venenatis turpis. Ut tellus ipsum, posuere bibendum [...]
                            </p>
                        </li>
                    </ul>   
                </div><!-- /.blog_post 2 -->

                <div class="templatemo_clear"></div>

                <div class="col-sm-5 col-md-6 blog_post">
                    <ul class="list-inline">
                        <li class="col-md-4"><a href="#">
                            <img class="img-responsive" src="images/blog-image-2.jpg" alt="gallery 3" /></a>
                        </li>
                        <li class="col-md-8">
                            <div class="pull-left">
                                <span class="blog_header">WEB DEVELOPMENT</span><br/>
                                <span>Posted by : <a class="link_orange" href="#"><span class="txt_orange">Julia</span></a></span>
                            </div>
                            <div class="pull-right">
                                <a class="btn btn-orange" href="#" role="button">14 February 2084</a>
                            </div>
                            <div class="clearfix"> </div>
                            <p class="blog_text">
                                    Fusce molestie tellus risus, id commodo turpis convallis id. Morbi mattis sapien sapien, vitae lacinia ante interdum sit amet. Praesent eget varius diam, ac tempor est. Mauris at scelerisque magna [...]
                            </p>
                        </li>
                    </ul>   
                </div><!-- /.blog_post 3 -->

                <div class="col-sm-5 col-md-6 blog_post">
                    <ul class="list-inline">
                        <li class="col-md-4">
                            <a href="#">
                                <img class="img-responsive" src="images/blog-image-1.jpg"  alt="gallery 4" />
                            </a>
                        </li>
                        <li class="col-md-8">
                            <div class="pull-left">
                                <span class="blog_header">NEW FLUID LAYOUT</span><br/>
                                <span>Posted by : <a class="link_orange" href="#"><span class="txt_orange">Linda</span></a></span>
                            </div>
                            <div class="pull-right">
                                <a class="btn btn-orange" href="#" role="button">11 February 2084</a>
                            </div>
                            <div class="clearfix"> </div>
                            <p class="blog_text">
                                In venenatis sodales purus a cursus. Ut consectetur, libero ac elementum tristique, enim ante aliquet mauris, scelerisque congue magna neque ac purus. Aliquam facilisis volutpat odio [...]
                            </p>
                        </li>
                    </ul>
                </div> <!-- /.blog_post 4 -->

            </div>
        </div>
    </div>

其次，你在模板中使用了// You have to pass the function in as an attribute <hello-directive list="osList" func="myFunc()"></hello-directive>而不是onclick，这是问题的一部分，所以我做了那个转换：

ng-click

最后，您需要在指令范围内绑定函数，然后通过绑定名称调用它：

// You need to use "ng-click" instead of "onclick"
template: '<h3>{{list}}</h3><button ng-click="func()" type="button">Button</button>',

Here's a Working Fiddle

所有这些粘在一起看起来像这样：

HTML

scope: {
  list: "=",
  // Bind the function as a function to the attribute from the directive
  func: "&"
},

的Javascript

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <hello-directive list="osList" func="myFunc()"></hello-directive>
</div>

Answer 2

如果您想执行其他地方定义的函数，请确保通过scope指令属性传递它。

您可以在这里：

scope: {
  context: '=', 
  title: '=',
  alert='&' // '&' is for functions
}

在你使用指令的地方，你将传递函数的“表达式”（不仅意味着函数，而且是在点击发生时想要发生的函数的实际调用。

<step-form-directive alert="alert()" title=".." context=".."></step-form-directive>

ng-click in angular directive - 从根范围传递函数

2 个答案:

HTML

的Javascript