Adding Dynamic Links

Just like adding images, adding links is a two step process.

<mb-choose-link belongs-to="socialBtn" property="link">
  <a class="btn btn-default" mb-link="link" belongs-to="socialBtn">
    <span mb-edit ng-model="socialBtn.title" single="true"></span>
  </a>
</mb-choose-link>

mb-link

mb-link can be attached any kind of element. You pass in the property is listens on, and belongs-to for which object is listens on

choose-link

Choose link works be adding a belongs-to to specify that when the user chooses a link it will add it to this object using the property name passed in

<a class="btn btn-default" mb-link="link" belongs-to="socialBtn"></a>

Combining the two

choose-link will surround mb-link so that when you click anywhere within in the link, a dialog will popup allowing you to set a url.

Alternative Button

If you wish to edit your link by clicking a button instead of clicking anywhere on the actual link you can use

<mb-edit-link belongs-to="socialBtn" property="link"></mb-edit-link>

This will provide a button that will will hover in the top right corner of the element. This however requires the element to have a position: relative which you can add with this class relative.

In this case you would replace the choose-link with mb-edit-link anywhere in your template