angularjs:在指令中使用$ watch来调用服务

时间:2013-08-08 05:39:17

标签: javascript angularjs-directive angularjs-scope angularjs-service

我正在创建一个使用输入框进行两天绑定的指令。

$ watch被置于链接功能内(我不知道这是不是一个好主意)来观察输入框中的值。

看起来像是范围。$ watch根本没有做任何事情。

我无法弄清楚我试图更换的问题是什么 从

scope.$watch('var',srv.doStuff(),true);

scope.$watch('location',srv.doStuff(),true);

还没有运气。

全部谢谢

http://plnkr.co/edit/4XUqPsCLFOoJD0BPlk14

的index.html

<div ng-controller="formCtrl">
<form novalidate class="simple-form">
    Input: <input type="text" ng-model="location" required><br/>
</form>
<div ng-mydir var="location"></div>
<div>

app.js

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

app.controller('formCtrl', function($scope) {
  $scope.location="empty";
});

// a service 
app.service('srv', function() {
  //a function does stuff
  this.doStuff=function (){
     console.log('i am done');
  };
});


//a diretive calls serivce
app.directive('ngMydir', function (srv) {
  return {
    restrict: 'A',
    scope: {
        var:'='
    },
    link: function(scope,elem,attrs,ctrl){
    console.log(scope.var);
    scope.$watch('var',srv.doStuff(),true);
    }
  };
});

1 个答案:

答案 0 :(得分:2)

您传入srv.doStuff(),这是一个函数调用而不是实际函数,您可以使用以下解决方案之一:

在像这样的函数中扭曲函数调用srv.doStuff()

link: function (scope, elem, attrs, ctrl) {
    scope.$watch('var', function () {
        srv.doStuff();
    }, true);
}

或者只是

link: function (scope, elem, attrs, ctrl) {
    scope.$watch('var', srv.doStuff, true);
}