标签: angularjs-ng-click

我想在我的模型中将ng-click函数调用存储为字符串.我不能使用ng-click ="m.func",如果我使用ng-click ="{{m.func}}"也不能正常工作.

http://jsfiddle.net/j8wW5/19/

在ng-click ="{{m.func}}"的情况下,它看起来像角度1.2.0会抛出错误.

我怎样才能把它带到工作中？

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="m in model"><a href="#" ng-click="{{m.func}}">{{m.caption}}</a></div>
</div>

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

app.controller('myCtrl', function($scope) {
    $scope.model = [
        {
            caption: 'callme a',
            func : 'callme_a()'
        },
        {
            caption: 'callme b',
            func : 'callme_b()'
        }
    ]

    $scope.callme_a = function() {
        alert("called a");
    }

    $scope.callme_b = function() {
        alert("called b");
    }
});

tl; dr:如何强制angular只在<a>元素中执行ngclick指令而不清空/删除href？

我的网站在某些元素上有一些自定义行为(模态打开,位置栏更新等)但是对于SEO索引我还需要它是一个包含有效链接<a>的href属性的元素.

如:

<a href="/{{item.url}}" ng-click="doCustomStuff(item)">some link</a>

但是,angular也会执行,href并且路由使我的自定义ng-click逻辑无用.

有没有办法扭转这种行为？

我有由ng:repeat创建的html元素.我需要在所有其他元素的ng-click中更改"active"类,并且需要在事件发生的特定元素中添加类.

<ul class="paginate">
   <li ng-repeat="value in pageList">
       <a ng-class="{active : $first, item : true}"  ng-click="clickedPage(value)">{{value}}</a>
  </li>
</ul>

这里首先<a>有'活跃'课程.我需要删除'active'类,<a>如果我点击<a>没有'active'类,则需要添加相同的类.

我试图做以下事情:

<accordion-heading ng-click="doSomething(); isopen=!isopen">

这有用吗？还是不可能把那里的电话串起来？

ng-click="doThis(param); doThat(param);"

我只需指向正确的方向:-)

编辑:

这个:

ng-click="doThis(param); doThat(param);"

按预期工作,我认为是:

isopen=!isopen

这导致了问题,我意识到我最初并没有这么说.

我通过在手风琴标题中添加一个额外的div来解决这个问题,如下所示:

<accordion-heading ng-click="isopen=!isopen">
    <div ng-click="showMainView()">
        <i class="glyphicon" ng-class="{'glyphicon glyphicon-minus': isopen, 'glyphicon glyphicon-plus': !isopen}"></i>
        {{item.model}}<br>{{item.model_engine}}
    </div>
</accordion-heading> 

我是AngularJS领域的新人,当然我正在做错事.所以,这是我的问题:我有一个小聊天小部件,它通过PHP API从JSON获取数据.在我的JSON中,我提供了包装器和一些ng*标签的所有消息.我遇到的问题是不会对这些元素触发ng-click操作.html块注入了ng-bind-html.

这是我的角度应用程序:

var chat = angular.module("chat", ['ngDialog']);

chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {

    $scope.messages = "";


    $scope.getData = function() {
        $http.get("/url/to/api")
            .success(function(data, status, headers, config) {
                $scope.messages = data.html;
            }).error(function(data, status, headers, config) {
                //alert("AJAX f   ailed!");
            });
    };

    $scope.getData();

    $scope.getHtml = function(html){
        return $sce.trustAsHtml(html);
    };

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function(){
        $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
        }, 5000)
    };


    // Kick off the interval
    $scope.intervalFunction();

    $scope.messageAdminTools = function(message_id)
    {
        console.log("called");
        var template …

编辑 代码是正确的,问题是因为包括'ngTouch',请参阅下面我自己的答案.

我可能在这里犯了一些愚蠢的错误,但对于我的生活,我找不到它.我有这个标记,它与控制器正确连接:

<input type="text" ng-change="doStuff()" ng-model="stuff"/>
<button ng-click="doStuff()">doStuff</button>

控制器代码:

console.log('Hi from controller');
$scope.stuff = "something";
$scope.doStuff = function() {
   alert('doing stuff');
}

单击按钮时没有任何问题.如果我更改了输入字段,我会收到警报,因此ng-change有效,但ng-click却没有.让我知道这是不是足够的信息,但我不知道还有什么提供,一般设置似乎工作正常...

HTML的其余部分不包含任何Angular指令,并且在myModule.config中加载如下:

$stateProvider
    .state('stuff', {
            templateUrl: 'pages/stuff.html',
            url: '/stuff',
            controller: 'StuffCtrl'
     })

并且控制器的定义如下:

angular.module('myModule')
    .controller('StuffCtrl', function ($scope) {
        // above code
    });

我的控制器里面有两个功能

$scope.first = function()
{
    console.log("first");
}

$scope.second = function()
{
console.log("hello");
}

Now in my template i give call to first function

<button ng-click="first()">click</button>

现在我希望我的第一个函数完成执行后,第二个函数自动开始执行而不需要任何点击.

即单击第一个函数执行,然后分别执行第二个函数.

我尝试在(动态)之前生成的按钮上添加ng-click,但效果不佳.此外,我已尝试在此论坛上找到的所有解决方案,没有人运作良好.

我的HTML代码:

<body class="max_height" ng-app="myApp">
    <div class="container max_height" ng-controller="myCtrl">
        <div id="play" tabindex="0" ng-init="init()" ng-keydown="keyDown($event)">
            {{ content }}
        </div>
    </div>

    <script src="js/angular.min.js"></script>
    <script src="js/script.js"></script>
</body>

我的AngularJS代码:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $compile) {
  $scope.init = function() {
    var el = '<button class="btn" id="start" data-ng-click="startAnimation()">Start</buttom>';
    var element = angular.element(document.querySelector('#play'));
    var generated = element.html(el);
    $compile(generated)($scope);
}
$scope.startAnimation = function(){
        console.log("click");
}
});

我的错误是"RangeError:超出最大调用堆栈大小",这是由$ compile(生成)($ scope)生成的; .从第一个问题派生出来的另一个问题是,如果我单击按钮,那么函数startAnimation将执行数百次.

请给我一个解决方案.哪里出错了.

对于模型，我需要一个简单的机制，例如

ng-click="alert('Clicked')"

但是上面的代码无法正常工作，有人可以帮我吗？我不想碰控制器。

第一次用$ mdDialog工作我习惯用外部HTML模板创建一个对话框.

到目前为止,这么好,...它的工作模板可以打开,但在HTML中的ng-click不再工作.

我找不到它的原因.

在userController中调用mdDialog,如下所示:

<md-icon
        layout="row"
        flex md-font-set="material-icons"
        class="active"
        ng-click="vm.showMenu($event)">
    menu
</md-icon>

在userController中打开$ mdDialog的方法:

vm.showMenu = function showMenu(ev){

    $mdDialog.show({
        controller: MenuDialogController,
        templateUrl: 'app/components/head/user/menu.dialog.html',
        parent: angular.element($document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
        .then(function(answer) {
            $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
            $scope.status = 'You cancelled the dialog.';
        });
};

这是对话框的对话框控制器,按钮不起作用:

angular
    .module('trax')
    .controller('MenuDialogController', MenuDialogController);

function MenuDialogController() {

    var vm = this;

    vm.close = function close(){
        alert('close …