2017-03-29 19 views
0

コントローラ関数を指令から呼び出す必要があります。ここにはfiddle.があります。コントローラーにsayHello()関数があります。そして私はangleディレクティブからその関数を呼びたいと思います。もし私がscope.sayHello()のような壁なら、角度指令からコントローラ関数を呼び出す方法

scope.sayHello is not a function 

私はコンソールのようになっています。

答えて

1

あなたのごちそうで発砲するように警告するには、テンプレートにpersonを追加するだけでした。あなたはupdateparent="updatePerson()"を持っていましたが、personをその呼び出しに渡すだけでした。これはupdateparent="updatePerson(person)"です。その後、あなたのアラートが発せられました。

これは、関数に渡すすべてのパラメータをテンプレートに記述する必要があるためです。 updateparent({person: mandatePerson})のように呼び出すので、personというキーをテンプレートに入れて、そのパラメーターで呼び出す必要があります。彼らは一致する必要があります。

0

アンギュラディレクティブのlink functionscopecontrollerの両方の引数を持っている - あなたが呼び出したいメソッドは、コントローラに$scopeに直接であれば、あなたがcontrollerAs構文を使用している場合arg--あなただけの(範囲の外にそれを呼び出すことができます私はそれがrecommended Angular patternであることをお勧めします)あなたはそれをコントローラ引数から呼び出すことができます。あなたがscopeまたはメソッドにしたい場合は、ディレクティブcreation--で一度

link: function (scope, iElement, iAttrs, controller, transcludeFn) 
    scope.sayHello(); 
} 

link実行:

だから、あなたの特定のケースあなたのディレクティブreturnオブジェクトで(直接$scopeのメソッド)のために、あなたは、プロパティlinkを追加しますなんらかの理由で外部で利用できるようにするには、モジュールの最上位レベルで定義された変数に割り当てます。

0

私はあなたの指示を少し変更しましたが、これはあなたがそのような機能を得る方法です。 FIDDLE

AngularJSに興味がある場合は、John papa styleguideを強くお勧めします。 https://github.com/johnpapa/angular-styleguide

これは、controllerAsのような構文を使用して、コードクリーナーの作成に役立ちます。

HTML

<body ng-app="myApp" ng-controller="MainCtrl"> 
    <div> 
     Original name: {{mandat.name}} 
    </div> 
    <my-directive mandat="mandat"></my-directive> 
</body> 

JS

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

function MainController($scope) { 
    $scope.mandat = { 
    name: "John", 
    surname: "Doe", 
    person: { id: 1408, firstname: "sam" } 
    }; 
} 

app.directive('myDirective', MyDirective); 

function MyDirective() { 
    return { 
    restrict: 'E', 
    template: "<div><input type='text' ng-model='mandat.person.firstname' /><button ng-click='updateparent()'>click</button></div>", 
    replace: true, 
    scope: { 
     mandat: "=" 
    }, 
    controller: function($scope) { 
     $scope.updateparent = function() { 
     $scope.mandat.name = "monkey"; 
     } 
    } 
    } 
} 
関連する問題