Ananth Ananth - 11 months ago 44
AngularJS Question

To pass an interpolated expression into an Angular Directive

I have seen this question asked few times. But not able to implement the solution mention in those answer in the right way. I am new to Angular and trying to use Observe or watch to pass interpolated expressions into a custom directive to obtain a one way binding.

I am not sure what is the correct way to use $observe to attain this behavior.

I tried this.

attr.$observe('oneway', function (attributeValue) {
scope.oneway = scope.$parent.$eval(attributeValue);

But found the following issues

  1. value in the attribute must not contain {{}} else $eval will
    <mydir oneway=Prop1></mydir>
    will work

    `<mydir oneway={{Prop1}}></mydir>` fails

    But this will fail my entire objective to have a one-way binding
    between directive and parent

  2. Even if I have an expression inside the directive, $observe get
    fired only once. Changing the {{Prop1}} doesn't fire the observe

  3. I tried using $watch instead of $observe. But still facing the same

What is the correct way to use observe\watch to obtain a one-way binding between controller and directive ?

Following the complete code

<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/angular.js"></script>
function customdir1() {
var directiveDefinitionObject = {};
directiveDefinitionObject.templateUrl = "/CustomControl/HtmlPage1.html";
directiveDefinitionObject.scope = { oneway: "@@oneway" }; = function (scope, element, attr, ctrl) {

attr.$observe('oneway', function (attributeValue) {

scope.oneway = scope.$parent.$eval("Prop1");

return directiveDefinitionObject;

var app = angular.module("myapp", []).controller("myCont", function ($scope) {
$scope.Prop1 = "TestProp1Text";

}).directive("mydir", customdir1);
<body ng-app="myapp">
<div ng-controller="myCont">
<input type="text" ng-model="Prop1" />
<mydir oneway={{Prop1}}></mydir>

Markup in the Template (HtmlPage1.html)

<input type="text" ng-model="oneway" />

Thanks So much in Advance..

Answer Source

Here is a fiddle of what you need.

<mydir oneway="foo"></mydir>

and just use '=' to directive's scope

scope: {
  oneway: '='