コントローラ関数を指令から呼び出す必要があります。ここにはfiddle.があります。コントローラーにsayHello()関数があります。そして私はangleディレクティブからその関数を呼びたいと思います。もし私がscope.sayHello()のような壁なら、角度指令からコントローラ関数を呼び出す方法
scope.sayHello is not a function
私はコンソールのようになっています。
コントローラ関数を指令から呼び出す必要があります。ここにはfiddle.があります。コントローラーにsayHello()関数があります。そして私はangleディレクティブからその関数を呼びたいと思います。もし私がscope.sayHello()のような壁なら、角度指令からコントローラ関数を呼び出す方法
scope.sayHello is not a function
私はコンソールのようになっています。
あなたのごちそうで発砲するように警告するには、テンプレートにperson
を追加するだけでした。あなたはupdateparent="updatePerson()"
を持っていましたが、person
をその呼び出しに渡すだけでした。これはupdateparent="updatePerson(person)"
です。その後、あなたのアラートが発せられました。
これは、関数に渡すすべてのパラメータをテンプレートに記述する必要があるためです。 updateparent({person: mandatePerson})
のように呼び出すので、person
というキーをテンプレートに入れて、そのパラメーターで呼び出す必要があります。彼らは一致する必要があります。
アンギュラディレクティブのlink functionはscope
とcontroller
の両方の引数を持っている - あなたが呼び出したいメソッドは、コントローラに$scope
に直接であれば、あなたがcontrollerAs
構文を使用している場合arg--あなただけの(範囲の外にそれを呼び出すことができます私はそれがrecommended Angular patternであることをお勧めします)あなたはそれをコントローラ引数から呼び出すことができます。あなたがscope
またはメソッドにしたい場合は、ディレクティブcreation--で一度
link: function (scope, iElement, iAttrs, controller, transcludeFn)
scope.sayHello();
}
link
実行:
だから、あなたの特定のケースあなたのディレクティブreturn
オブジェクトで(直接$scope
のメソッド)のために、あなたは、プロパティlink
を追加しますなんらかの理由で外部で利用できるようにするには、モジュールの最上位レベルで定義された変数に割り当てます。
私はあなたの指示を少し変更しましたが、これはあなたがそのような機能を得る方法です。 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";
}
}
}
}