C# MVC AngularJS creating custom element directive

Question

I'm kinda new to angular and I'm trying to build a web app with C# MVC. I want to create an element directive and show it when I click a button. I did partial view in the same location as the main view:

<div align="center">
    <table dir="rtl" lang="he">
        <tr>
            <td align="left">שם משפחה:</td>
            <td><input type="text" ng-model="Family.FamilyName" /></td>
        </tr>
        <tr>
            <td align="left">שם פרטי:</td>
            <td><input type="text" ng-model="Family.FirstName" /></td>
        </tr>
        <tr>
            <td align="left">מספר נפשות בבית:</td>
            <td><input type="text" ng-model="Family.Name" /></td>
        </tr>
        <tr>
            <td align="left">גורם מפנה:</td>
            <td align="left"><input type="text" ng-model="Family.Referee" /></td>
        </tr>
        <tr>
            <td align="left">טלפון:</td>
            <td><input type="text" ng-model="Family.Phone" /></td>
        </tr>
        <tr>
            <td align="left">כתובת:</td>
            <td><input type="text" ng-model="Family.Address" /></td>
        </tr>
        <tr>
            <td align="left">פירוט דיירי הבית:</td>
            <td><input type="text" ng-model="Family.Residents" /></td>
        </tr>
        <tr>
            <td align="left">סיבת פניה כללית:</td>
            <td><input type="text" ng-model="Family.GeneralCause" /></td>
        </tr>
        <tr>
            <td align="left">תאריכי לידה מלאים של הילדים:</td>
            <td><input type="text" ng-model="ChildrenFullBirthdays" /></td>
        </tr>
        <tr>
            <td align="left">הערות נוספות:</td>
            <td><input type="text" ng-model="Remarks" /></td>
        </tr>
    </table>
</div>

And added the directive:

.directive('addFamily', function () {
    return {
        restrict: 'E',
        scope:{Family:'Family'},
        templateUrl:'AddFamily.cshtml'
    };
});

then in my main view I added:

<div align="center">
    <button ng-click="ShowAddFamily()">הוספת משפחה</button>
</div>
<add-family ng-show="AddFamily" Family="Family"></add-family>

The function 'ShowAddFamily()' sets true to AddFamily.

But when I click the button nothing happens. Help please? What am I doing wrong?

Community · Accepted Answer · 2017-05-23 12:32:12Z

1

You cannot reference a .cshtml template as a templateUrl in your directive.

For a workaround on this, see: Is angular routing template url support for .cshtml file in ASP.Net MVC 5 Project?

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 23, 2017 at 17:41

Ben

2,7261 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Over a year ago

You're welcome. If this solution works for you, could you select this as the chosen answer? :)

Collectives™ on Stack Overflow

C# MVC AngularJS creating custom element directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related