title: How do you use dynamic ng-show values inside a directive template?
body: <p>I am learning angular, and I am trying to reduce some code that it takes to do some common things, like display error messages, by using angular directives.</p>
  
  <p>One directive I would like to create is like this:</p>
  
  <pre><code>&lt;error-message name="paymentPlanForm.position" error="required"&gt;
      This field is required.
  &lt;/error-message&gt;
  </code></pre>
  
  <p>This would generate the following:</p>
  
  <pre><code>&lt;p ng-show="paymentPlanForm.position.$dirty &amp;&amp; paymentPlanForm.position.$error.required"&gt;
      &lt;span class="fontawesome-remove"&gt;&lt;/span&gt; This field is required.
  &lt;/p&gt;
  </code></pre>
  
  <p>I started to write a directive to accomplish this as follows:</p>
  
  <pre><code>app.directive("errorMessage", function() {
      return {
          restrict: 'E',
          transclude: true,
          replace: true,
          templateUrl: 'views/partials/errorMessage.html',
          link: function(scope, element, attributes) {
              scope.name = attributes.name;
              scope.error = attributes.error;
          }
      }
  });
  </code></pre>
  
  <p>The template is as follows:</p>
  
  <pre><code>&lt;p ng-show="{{name}}.$dirty &amp;&amp; {{name}}.$error.{{error}}"&gt;
      &lt;span class="fontawesome-remove"&gt;&lt;/span&gt;
      &lt;span ng-transclude&gt;&lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>I thought this would work, but Angular seems to crash when trying to parse <code>ng-show</code> inside the template:</p>
  
  <pre><code>Error: [$parse:syntax] Syntax Error: Token '.' not a primary expression at column 1 of the expression [.$dirty &amp;&amp; .$error.] starting at [.$dirty &amp;&amp; .$error.].
  http://errors.angularjs.org/1.2.9/$parse/syntax?p0=.&amp;p1=not%20a%20primary%20expression&amp;p2=1&amp;p3=.%24dirty%20%26%26%20.%24error.&amp;p4=.%24dirty%20%26%26%20.%24error.
  minErr/&lt;@http://localhost:8080/keiko/vendor/js/angular.js:78
  </code></pre>
  
  <p>When I inspect the element in Firebug, the dynamic values have been passed in successfully, but I guess there's a problem with the scope, or something else.</p>
  
  <p>How can I get angular to do what I want?</p>