CODEWITHSUNDEEP
javascriptc#angularjsasp.net-mvcangular-directive
Erez Konforti
Erez Konforti

Reputation: 253

C# MVC AngularJS creating custom element directive

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?

Upvotes: 0

Views: 268

Answers (1)

Ben
Ben

Reputation: 2706

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?

Upvotes: 1

Related Questions